Does Svelte provide a TypeScript type for input change events?-CodePudding

Given the following sample code for a file input

<script lang="ts">
function onFileSelected(event) {
    const file: File = event.target.files[0];

    // ...
}
</script>

<input type="file" on:change={onFileSelected} />

I would like to add a type to the parameter event ( instead of any ). I tried Event and InputEvent but both don't know about the files field.

I'm looking for something like Svelte.ChangeEvent<HTMLFileInputElement>. Is there something I could use?

CodePudding user response：

Svelte has internal types, but it might not be the best idea to use them as they could change. They type the handler as a whole, which could be done like this for example:

const onFileSelected: svelte.JSX.EventHandler<Event, HTMLInputElement> = e => {
    if (e.currentTarget.files == null)
        return; // files can be null, handle however appropriate

    const file = e.currentTarget.files[0];
};

(The types do not affect target, which in many cases cannot be typed definitively. E.g. for a click event it can be any descendant of the element with the handler. Use currentTarget instead.)

You can also just do something similar yourself:

function onFileSelected(e: Event & { currentTarget: HTMLInputElement }) {
  // ...
}

This could then also be extracted to a generic type alias:

type ElementEvent<T extends Element> = Event & { currentTarget: T }

(Event could also be made a parameter, in case a more specific event is used.)