Question

我正在处理一个 Svelte 项目，配置为使用打字稿。

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

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

点击这个div时，需要调用一个函数changeFocusDate，并传入这个div对应的数组元素。

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

<块引用>

意外的令牌解析错误

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

这是怎么回事？当我忘记声明类型时，Eslint 将我的代码解析为打字稿，但当我声明类型时却不会。我只在我的 Svelte 文件的 html 中遇到这个问题。 <script> 标签内的打字稿表现良好（当然还有 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}

在 Svelte html 部分中未解析打字稿

1 个答案: