Svelte组件HTML部分匿名函数的显式类型标注问题

问题描述 #

我有一个名为Foo.svelte的Svelte组件，代码如下：

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

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

ESLint针对<input>行抛出错误：

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

尝试为函数标注类型，例如写成(evt: Target): void => console.log("hello there")时，会触发Svelte解析错误和ESLint意外令牌错误。希望找到不关闭该ESLint规则的解决办法，确认是标注方式、配置问题还是Svelte本身的限制。

可行解决办法 #

1. 修正内联函数的类型标注写法 #

Svelte模板解析器对直接在事件绑定中写带返回类型的箭头函数语法支持有限，且Target不是正确的DOM事件类型。可以用以下两种方式修正：

• 包裹函数并使用正确的事件类型（如InputEvent）：

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

• 改用带函数体的写法：

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

2. 将事件处理函数移至script块 #

这是最稳妥且易维护的方案，把内联函数提取到<script>标签中，正常使用TypeScript类型标注：

<script lang="ts">
    const handleInput = (evt: InputEvent): void => {
        console.log("hello there");
    };
</script>

<input on:input={handleInput} />

3. 局部调整ESLint规则（不关闭全局规则） #

如果不想修改代码结构，可以通过注释豁免当前行的规则检查：

<input on:input={(evt) => console.log("hello there")} /> <!-- eslint-disable-line @typescript-eslint/explicit-function-return-type -->

也可以在组件的script块顶部配置规则选项，允许带参数类型的函数省略返回类型：

<script lang="ts">
    /* eslint @typescript-eslint/explicit-function-return-type: ["error", { "allowTypedFunctionExpressions": true }] */
    ...
</script>

内容的提问来源于stack exchange，提问作者kswfr