reactjs - Typescript, styled-component eroare: TS2769: Niciun suprasarcină nu se potrivește cu această apelare. Suprasarcină 1 din 2

Acesta este componenta mea stilizată:

const stopPropagation = (event: Event): void => {
  event.stopPropagation();
};

<StyledComp onClick={stopPropagation}> //error occurs here
    hi StyledComp
</StyledComp>

și așa am definit-o:

export type Prop = {
  onClick: (event: Event) => void;
};

export const StyledComp = styled.div<Prop>`
  display: flex;
`;

Dar returnează o eroare de genul:

Tipurile proprietății 'target' sunt incompatibile. Proprietatea 'value' lipsește în tipul 'EventTarget', dar este necesară în tipul '{ value: string; }'. Supraincarcarea 2 din 2, '(props: StyledComponentPropsWithAs<"div", any, StyledComp, never>): ReactElement, string | ... 1 more ... | (new (props: any) => Component<...>)>', a generat următoarea eroare. Tipul '(event: Event) => void' nu este atribuit tipului '((event: MouseEvent) => void) & ((event: Event) => void)'. Tipul '(event: Event) => void' nu este atribuit tipului '(event: MouseEvent) => void'.

Notă: Poți găsi documentația styled-component&Typescript aici!

Editare:

Acesta este tipul Eveniment:

export type Event = {
  target: {
    value: string;
  };
  stopPropagation: () => void;
  preventDefault: () => void;
};

Răspuns #1

Partea importantă a mesajului de eroare este

Tipul '(event: Event) => void' nu poate fi atribuit tipului '(event: MouseEvent) => void'

Deci, proprietatea onClick a unui div stilizat are tipul (event: MouseEvent<HTMLDivElement, MouseEvent>) => void și vrei să îi atribui o funcție de tip (event: Event) => void, dar acest lucru nu funcționează, deoarece tipurile sunt incompatibile.

Ar trebui să scrii în schimb:

const stopPropagation = (event: MouseEvent<HTMLDivElement, MouseEvent>): void => {
  event.stopPropagation();
};