Svelte html 部分未解析打字稿

Question

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

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

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

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

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

Unexpected token ParseError

冒号好像没看懂。该代码也没有运行。

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

如何解决这个问题？我不认为我可以将函数的声明移动到 <script> 标记，因为我必须传递 date.

Answer 1

无法在 Svelte 标记中使用 TS 类型注释。为了仍然让 ESLint 满意，您可以创建一个函数，其中 returns 一个函数并调用它。

<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}

Svelte html 部分未解析打字稿

Typescript not parsed in Svelte html section

typescript

eslint

svelte