Question

我是Typescript的新手，对此我无法理解： https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/styled-components/index.d.ts

我试图找出样式化组件中模板文字内部的函数是否已定义类型。例如：

export const getColor = props => props.color;

const ColorButton = styled.button`
    border: 0;
    color: ${getColor};
`;

export default ColorButton;

我想为这两次导出编写一个d.ts文件。目前，我正在遵循以下模式：

type PropFunction<T> = (props: T) => string;
type Prop<T> = string | PropFunction<T>;

interface ColorButtonProps extends React.ButtonHTMLAttributes<HTMLButtonComponent> {
    color?: string;
    css?: Prop<ColorButtonProps>;
}

declare const getColor: Prop<ColorButtonProps>;
declare const ColorButton: React.ComponentType<ColorButtonProps>;

export default ColorButton;

之所以这样，是因为我可以将样式化的组件函数编写为props：

<ColorButton color="purple" css={getColor} />

由于getColor是样式组件在模板文字中期望的功能类型，因此我可以想象已经为它定义了一种类型，并且我不需要自己创建（PropFunction和Prop）。有没有更好的方法来定义这些类型？

样式化组件是否具有模板文字中的函数接口？

0 个答案: