Question

我有这个按钮：

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

export type ButtonPropsExtended = ButtonProps & React.HTMLProps<HTMLButtonElement>;

class Button extends React.Component<ButtonPropsExtended> { ... }

我也有该按钮的这个子变体：

import Button, { ButtonPropsExtended } from './button';

export interface CloseButtonProps extends ButtonPropsExtended {
    iconOnly?: boolean;
}

const CloseButton = ({ iconOnly, ...rest }: CloseButtonProps) => {
    return (
        <Button { ...rest }>
            { ...some jsx... }
        </Button>
    );
}

当我尝试在严格模式下将其全部编译时，我得到了这个巨大的Typescript错误：

ERROR in <my-dir>/button/close-button.tsx(14,10):
14:10 No overload matches this call.
  Overload 1 of 2, '(props: Readonly<ButtonPropsExtended>): Button', gave the following error.
    Type '{ children: Element[]; kind?: "normal" | "flat" | "primary" | undefined; negative?: boolean | undefined; size?: undefined; spinner?: boolean | undefined; accept?: string | undefined; ... 356 more ...; key?: string | ... 1 more ... | undefined; }' is not assignable to type 'IntrinsicClassAttributes<Button>'.
      Types of property 'ref' are incompatible.
        Type 'string | ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined' is not assignable to type 'string | ((instance: Button | null) => void) | RefObject<Button> | null | undefined'.
          Type '(instance: HTMLButtonElement | null) => void' is not assignable to type 'string | ((instance: Button | null) => void) | RefObject<Button> | null | undefined'.
            Type '(instance: HTMLButtonElement | null) => void' is not assignable to type '(instance: Button | null) => void'.
              Types of parameters 'instance' and 'instance' are incompatible.
                Type 'Button | null' is not assignable to type 'HTMLButtonElement | null'.
                  Type 'Button' is missing the following properties from type 'HTMLButtonElement': disabled, form, formAction, formEnctype, and 250 more.
  Overload 2 of 2, '(props: ButtonPropsExtended, context?: any): Button', gave the following error.
    Type '{ children: Element[]; kind?: "normal" | "flat" | "primary" | undefined; negative?: boolean | undefined; size?: undefined; spinner?: boolean | undefined; accept?: string | undefined; ... 356 more ...; key?: string | ... 1 more ... | undefined; }' is not assignable to type 'IntrinsicClassAttributes<Button>'.
      Types of property 'ref' are incompatible.
        Type 'string | ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined' is not assignable to type 'string | ((instance: Button | null) => void) | RefObject<Button> | null | undefined'.
          Type '(instance: HTMLButtonElement | null) => void' is not assignable to type 'string | ((instance: Button | null) => void) | RefObject<Button> | null | undefined'.
            Type '(instance: HTMLButtonElement | null) => void' is not assignable to type '(instance: Button | null) => void'.
    12 | const CloseButton = ({ iconOnly, ...rest }: CloseButtonProps) => {
    13 |     return (
  > 14 |         <Button { ...rest }>
       |          ^

所以我的问题是：

我该如何解决？

和

实际的人实际上应该能够阅读和理解这些疯狂的类型检查错误吗？

Answer 1

我仍然不知道实际的错误是什么，但似乎至少部分问题是Button被声明为类组件，而CloseButton被定义为函数组件。所以当我改变时：

class Button extends React.Component<ButtonPropsExtended> { ... }

到

const Button = (props: ButtonPropsExtended) => { ... }

工作正常。

我不知道这个Typescript错误是什么意思

1 个答案: