Le type '(event : React.MouseEvent) => void' n'est pas assignable au type '(e? : MouseEvent<Element, MouseEvent> | undefined) => void'.

Question

Je l'ai fait :

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

Où StyledPill a des types :

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

y handleClick est :

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

Mais cela me donne une erreur de type sur le 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

D'après l'erreur, il semble que votre fonction anonyme devrait avoir une signature différente :

Votre signature fn anonyme (dans useCallback ) (event: React.MouseEvent) => void

Ce que TypeScript attend : (e?: MouseEvent<Element, MouseEvent> | undefined) => void

J'imagine que si vous mettez à jour le typage pour MouseEvent<Element, MouseEvent> | undefined para event alors vous devrez modifier l'implémentation pour qu'elle corresponde.