javascript - Hvordan setter jeg riktig type for en klikkhåndterer når jeg bruker Svelte med TypeScript?

Jeg bruker Svelte med TypeScript. Jeg har en knapp:

<button on:click|preventDefault={clickHandler}>
   Click me
</button>

Jeg prøver å sette korrekt type for klikkhåndtereren.

export let clickHandler: MouseEventHandler<HTMLButtonElement>;

Jeg fikk MouseEventHandler<HTMLButtonElement> fra TS-feilen når jeg bruker en annen type, f.eks:

Type 'Function' kan ikke tildeles til type 'MouseEventHandler'.

Men dette feiler med Cannot find name 'MouseEventHandler'. Jeg klarer ikke å finne ut hvor jeg skal importere typen MouseEventHandler siden den ikke eksporteres av Svelte.

Hvordan setter jeg riktig type for en klikkhåndterer når jeg bruker Svelte med TypeScript?

Svar #1

Videre undersøkelse viser at Sveltes hendelseshåndterere - ja, Sveltes, ikke Reacts - er under svelte.JSX. Ja, når du bruker vanlige .svelte-komponenter og ikke bruker JSX. Jeg så faktisk JSX-referanser i forskningen min, men ignorerte dem fordi jeg ikke brukte JSX. Men jeg antar at Sveltes TS-funksjonalitet kanskje utnytter noe eksisterende arbeid fra React?

Så den korrekte TS-typen for en klikkhåndterer er:

export let clickHandler: svelte.JSX.MouseEventHandler<HTMLButtonElement>;

Svar #2

Selv om du kan angi typen på egenskapen, vil du kanskje bare videresende hendelsen i stedet:

<button on:click|preventDefault>
   Click me
</button>

(Dokumenter - Etter modifikatorer)

På den måten kan alt som bruker komponenten også bare legge til en on:click på komponenten.