类型“字符串”不可分配给类型“未定义”

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>

抛出此类型错误：

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>
);

Typescript 编译器是否将sizeprop 解释为 type undefined？为什么？

Answer 1

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

size?: number

这导致size类型成为undefined. 这是示例打字稿游乐场，您可以在其中看到类型如何解析为undefined。

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

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