时间戳

首页 > 解决方案 > 打字稿未在 Svelte html 部分中解析

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

问题描述

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

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

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

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

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

意外的令牌 ParseError

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

这里发生了什么？当我忘记声明类型时，Eslint 将我的代码解析为打字稿，但当我声明类型时它不会。我只在我的 Svelte 文件的 html 中遇到这个问题。<script>标签内的打字稿表现良好（lang="ts"当然）。我想使用适当的 TS 内联。

这怎么可能解决？我不认为我可以将函数的声明移至<script>标签，因为我必须通过date.

标签： typescripteslintsvelte

解决方案

不能在 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}

推荐阅读