Korrekt Typescript-type til on:change-handler i Svelte

Jeg har denne kode:

<select class="form-control" on:change={pathChanged}>

Signaturen for pathChanged er:

function pathChanged(event: { target: HTMLSelectElement }) {

Når jeg kører det gennem tsc ved hjælp af npm run check, får jeg denne fejl:

Error: Type '(event: { target: HTMLSelectElement; }) => void' is not assignable to type 'FormEventHandler<HTMLSelectElement>'.
  Types of parameters 'event' and 'event' are incompatible.
    Type 'Event & { currentTarget: EventTarget & HTMLSelectElement; }' is not assignable to type '{ target: HTMLSelectElement; }'.
      Types of property 'target' are incompatible.
        Type 'EventTarget | null' is not assignable to type 'HTMLSelectElement'.
          Type 'null' is not assignable to type 'HTMLSelectElement'. (ts)

<select class="form-control" on:change={pathChanged}>

Hvilken signatur skal pathChanged have?

Svar #1

Begivenheden target er mindre specifik1, end du gerne vil have, at den er. I dette tilfælde bruger jeg normalt en typepåstand inden for funktionen for at arbejde omkring dette.

function pathChanged(event: Event) {
   const target = event.target as HTMLSelectElement;
   // ...
}

Selvom fejlen angiver, at currentTarget skal have korrekt type, bør det at bruge det også fungere:

function pathChanged(event: { currentTarget: HTMLSelectElement })

Hvis en begivenhed har en mere specifik type end bare Event, f.eks. MouseEvent, kan typerne kombineres ved brug af &:

function onMouseUp(event: MouseEvent & { currentTarget: HTMLSelectElement })

1 Årsagen til dette er, at de fleste begivenheder bobler, og target ofte kan være et hvilket som helst element inden for elementet med håndteringen på. currentTarget refererer altid til elementet med håndteringen og kan derfor bestemt typificeres.

Relaterede artikler