Question

任何人都可以在以下方面提供帮助吗？这是一个有效的.js文件，我需要将其放入TypeScript程序中。

import React from "react";
import styled, { css } from "styled-components";

const style = ({ theme, ...rest }) => css`
  border-color: ${theme.colors.primary};
  background-color: ${theme.colors.lightest};
  color: ${theme.colors.secondary};
  border-width: 2px;
  border-style: solid;
  padding: 10px;
  font-size: 24px;

  :hover {
    color: ${theme.colors.lightest};
    background-color: ${theme.colors.secondary};
  }
`;

const ButtonBase = styled.button([style]);

export const Button = ({ onClick, children }) => (
  <ButtonBase onClick={onClick}>{children}</ButtonBase>
);

我正在努力工作的那条线是：

const ButtonBase = styled.button([style]);

TypeScript错误为：

[ts]
Argument of type '(({ theme, ...rest }: { [x: string]: any; theme: any; }) => InterpolationValue[])[]' is not assignable to parameter of type 'TemplateStringsArray'.
  Property 'raw' is missing in type '(({ theme, ...rest }: { [x: string]: any; theme: any; }) => InterpolationValue[])[]'.
const style: ({ theme, ...rest }: {
    [x: string]: any;
    theme: any;
}) => InterpolationValue[]

Answer 1

尝试一下：

styled.button`
  ${style}
`

使用字符串文字将此JS函数转换为TS

1 个答案: