Mengingat jenis ini:

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

Kenapa kasus penggunaan ini:

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

Melempar kesalahan jenis ini:

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>
       |                                        ^

Apakah kompiler TypeScript menafsirkan prop size bertipe undefined? Mengapa?

2
o01 1 Juli 2020, 17:55

1 menjawab

Jawaban Terbaik

Masalahnya adalah React.HTMLProps sudah memiliki properti size yang dideklarasikan sebagai berikut:

size?: number

Ini menyebabkan tipe size menjadi undefined. Berikut ini adalah contoh naskah bermain , di mana Anda dapat melihat bagaimana tipe diselesaikan ke undefined.

Taruhan terbaik Anda adalah mengubah nama properti size Anda atau menghilangkan properti HTMLProps size, misalnya:

type MyHTMLProps = Omit<React.HTMLProps<HTMLAnchorElement>, 'size'>;
export type LinkButtonPropsExtended = ButtonProps & MyHTMLProps;
3
zhuber 1 Juli 2020, 15:06