Search code examples
typescripteslintsvelte

Labelling explicit types for anonymous function in HTML part of svelte component

I have a svelte component in Foo.svelte that looks like this:

<script lang="ts">
    ...
</script>

<input on:input={(evt) => console.log("hello there")} />

Eslint gives me an error for the <input> line complaining that the anonymous function doesn't have an explicit return type.

Missing return type on function.eslint@typescript-eslint/explicit-function-return-type

If I try to label the types in the function like (evt: Target): void => console.log("hello there") I get a svelte parser error and eslint unexpected token error.

Am I labelling the types wrong, missing a configuration or is typing anonymous function not possible with svelte?

I know it's possible to turn off the eslint rule, but I would rather keep it.

Solution

  • This is not possible in Svelte 3/4.
    TS syntax is not supported in the template, you have to extract the function to the <script>.

    This should work starting in Svelte 5.