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

【问题标题】：Typescript not parsed in Svelte html section打字稿未在 Svelte html 部分中解析
【发布时间】：2021-04-30 14:56:16
【问题描述】：

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

对于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) } 时，我得到：

意外的令牌 ParseError

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

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

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

【问题讨论】：

标签： typescript eslint svelte

【解决方案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}

【讨论】：

【解决方案2】：

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

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

【讨论】：