javascript - Typen '(event: React.MouseEvent) => void' kan inte tilldelas typen '(e?: MouseEvent | undefined) => void'

Jag har:

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

Där StyledPill har typer:

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

och handleClick är:

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

Men detta ger mig ett typfel på 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>'.

Svar #1

Från felet verkar det som att din anonyma funktion bör ha en annan signatur:

Din anonyma fn-signatur (i useCallback) (event: React.MouseEvent) => void

Vad TypeScript förväntar sig: (e?: MouseEvent<Element, MouseEvent> | undefined) => void

Jag föreställer mig att om du uppdaterar typen till MouseEvent<Element, MouseEvent> | undefined för event så kommer det betyda att du måste ändra implementeringen för att matcha.