Svelte html部分中未解析Typescript

Question

我正在做一个Svelte项目，配置为使用typescript。

对于datesToShow数组中的每个元素，DOM中都应该出现一个div。这是用下面显示的代码完成的。

{#each datesToShow as date}
<div on:click={() => { changeFocusDate(date) }}> ... </div>
{/each}

单击此div时，应调用函数changeFocusDate，并传递与此div对应的数组元素。

这一切都很好。然而，我使用的是启用了explicit-function-return-type的typescript，所以esint警告我，我的函数没有定义返回类型，这很好。代码确实运行。当将其更改为(): void => { changeFocusDate(date) }时，我得到：

意外的令牌分析错误

它似乎不理解冒号。代码也不运行。

这是怎么回事？当我忘记声明类型时，Eslint会将我的代码解析为typescript，但当我声明类型时就不会了。我只在Svelte文件的html中遇到这个问题。<script>标记中的typescript执行良好(当然使用lang="ts"(。我想使用正确的TS内联。

这怎么能解决？我不认为我可以将函数的声明移动到<script>标记，因为我必须传递date。

Answer 1

不可能在Svelte标记中使用TS类型注释。为了让ESLint仍然满意，您可以创建一个返回函数并调用该函数的函数。

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

function createChangeFocusDateFn(date): () => void {
return (): void => changeFocusDate(date)
}
</script>
{#each datesToShow as date}
<div on:click={createChangeFocusDateFn(date)}> ... </div>
{/each}

Answer 2

此外，如果要使用局部变量和传递的参数，可以使用//@ts-ignore

{#each options as option}
<div
on:change={
//@ts-ignore
e => change_event(e, option)
}
/>
{/each}