Question

给出以下类型：

export type ButtonProps = {
    kind?: 'normal' | 'flat' | 'primary';
    negative?: boolean;
    size?: 'small' | 'big';
    spinner?: boolean;
}

export type LinkButtonPropsExtended = ButtonProps & React.HTMLProps<HTMLAnchorElement>;

const LinkButton = ({ children, href, ...rest }: LinkButtonPropsExtended) => (
    <a href={href} className={cls(rest)}>
        { children }
    </a>
);

这个用例怎么来

<LinkButton href={url} size="big">My button</LinkButton>

引发此类型错误：

64:53 Type 'string' is not assignable to type 'undefined'.
    63 |                 <Button size="big">Another button<Button>
  > 64 |                 <LinkButton href={url} size="big">My button</LinkButton>
       |                                        ^

Typescript编译器是否将size属性解释为undefined类型？为什么？

Answer 1

问题是React.HTMLProps已经具有size属性，该属性声明如下：

size?: number

这将导致size类型为undefined。这是示例typescript playground，在这里您可以看到如何将类型解析为undefined。

您最好的选择是更改size属性的名称或省略HTMLProps size属性，例如：

type MyHTMLProps = Omit<React.HTMLProps<HTMLAnchorElement>, 'size'>;
export type LinkButtonPropsExtended = ButtonProps & MyHTMLProps;

无法将“字符串”类型分配给“未定义”类型

1 个答案: