javascript - Hur anger jag korrekt typ för en klickhanterare när jag använder Svelte med TypeScript?

Jag använder Svelte med TypeScript. Jag har en knapp:

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

Jag försöker ställa in rätt typ för klickhanteraren.

export let clickHandler: MouseEventHandler<HTMLButtonElement>;

Jag fick MouseEventHandler<HTMLButtonElement> från TS-felet när jag använder en annan typ, t.ex.:

Typen 'Function' kan inte tilldelas typen 'MouseEventHandler'.

Men detta misslyckas med Cannot find name 'MouseEventHandler'. Jag kan inte lista ut var jag ska importera typen MouseEventHandler eftersom den inte exporteras av Svelte.

Hur ställer jag in rätt typ för en klickhanterare när jag använder Svelte med TypeScript?

Svar #1

Vidare undersökning visar att Sveltes händelsehanterare - ja, Sveltes, inte Reacts - finns under svelte.JSX. Ja, när du använder vanliga .svelte-komponenter och inte använder JSX. Jag såg JSX-referenser i min forskning men ignorerade dem eftersom jag inte använde JSX. Men jag antar att Sveltes TS-funktionalitet kanske utnyttjar något befintligt arbete från React?

Så den korrekta TS-typen för en click-handler är:

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

Svar #2

Även om du kan skriva egenskapen, kanske du bara vill vidarebefordra händelsen istället:

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

(Dokument - Efter modifierare)

På det sättet kan vad som helst som använder komponenten bara också lägga till en on:click på komponenten.