reactjs - نوع 'string' را نمیتوان به نوع 'undefined' اختصاص داد

با توجه به این نوعها:

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

آیا کامپایلر تایپاسکریپت مقدار size را از نوع undefined تفسیر میکند؟ چرا؟

پاسخ شماره ۱

مشکل این است که React.HTMLProps از قبل دارای ویژگی size است که به صورت زیر اعلام شده است:

size?: number

این باعث میشود نوع size به undefined تبدیل شود. در اینجا یک نمونه playground تایپاسکریپت وجود دارد که میتوانید ببینید چگونه نوع به undefined حل میشود.

بهترین گزینه شما این است که نام ویژگی size خود را تغییر دهید یا ویژگی size در HTMLProps را حذف کنید، برای مثال:

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