类型‘(事件: React.MouseEvent) => void’不可分配到‘类型'(e?：MouseEvent<Element，MouseEvent> MouseEvent>未定义) => 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 for event，那么这将意味着您必须更改实现以匹配。