Right Typescript type for on:change handler in Svelte

user_666079 0
Viewed 298

I have this code:

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

The signature for pathChanged is:

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

When I run that through tsc using npm run check, I get this error:

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

What signature should pathChanged have?

svelte typescript
1 Answers

The event target is less specific than you would want it to be. In this scenario I usually use a type assertion within the function to work around this.

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

Though the error states that currentTarget should be typed correctly, so using that should work as well:

function pathChanged(event: { currentTarget: HTMLSelectElement })
user_5467300
Related