javascript - 类型 '(event: React.MouseEvent) => void' 不可分配给类型 '(e?: MouseEvent<Element, MouseEvent> | undefined) => void'

Question

我有:

<StyledPill
        size="small"
        label="See All Destinations"
        onClick={handleClick}
        data-index={0}
        featured={selectedSearchType === 0}
        leftIcon={<AllDestinationsIcon />}
      />

其中 StyledPill 具有类型:

export interface IPillProps {
  size: 'small' | 'medium';
  className?: string;
  featured?: boolean;
  label: string | ReactElement;
  disabled?: boolean;
  counter?: boolean;
  onClick?: (e?: MouseEvent) => void;
  leftIcon?: ReactElement<IconProps>;
  onClickLeftIcon?: (e?: MouseEvent) => void;
  rightIcon?: ReactElement<IconProps>;
  onClickRightIcon?: (e?: MouseEvent) => void;
  image?: ReactElement;
}

和handleClick是:

  const handleClick = useCallback((event: React.MouseEvent) => {
    console.log('shamoon1', {event}, {selectedSearchType});
    preventClickPropagation(event, false, (e) => setSelectedSearchType(Number((e.target as HTMLElement).dataset.index)))
  },
    []
  );

但这在 onClick 上给了我一个类型错误:

Type '(event: React.MouseEvent) => void' is not assignable to type '(e?: MouseEvent<Element, MouseEvent> | undefined) => void'.
  Types of parameters 'event' and 'e' are incompatible.
    Type 'MouseEvent<Element, MouseEvent> | undefined' is not assignable to type 'MouseEvent<Element, MouseEvent>'.
      Type 'undefined' is not assignable to type 'MouseEvent<Element, MouseEvent>'.

Answer 1

从错误看来，您的匿名函数应该具有不同的签名:

您的匿名 fn 签名(在 useCallback 中) (event: React.MouseEvent) => void

TypeScript 期望什么: (e?: MouseEvent<Element, MouseEvent> | undefined) => void

我想如果您将输入更新为 MouseEvent<Element, MouseEvent> | undefined对于 event那么这意味着您必须更改实现以匹配。