Svelte TypeScript：向事件处理程序添加类型时出现意外的 tokensvelte（解析错误）

Question

我正在尝试将 TypeScript 实现到 Svelte 中，但遇到了这样的问题：当我尝试在下面的行中向事件添加类型时：

on:click={(e: Event) => onClick(e, data)}

它大喊：

Error: ParseError: Unexpected token

如果我删除输入，它会说：

Parameter 'e' implicitly has an 'any' type.

我怎样才能在 Svelte 中不出错地为这类东西添加类型？

编辑：更复杂的例子：

{#each elementsArray as element}
      <CustomComponent
        on:itemClick={(e: Event) => doSomething(e, element)}>
      </CustomComponent>
    {/each}

Answer 1

根据 official docs，模板中没有对 TypeScript 的官方支持。

At the moment, you cannot [use Typescript inside the template/mustache tags]. Only script/style tags are preprocessed/transpiled.

您需要将类型转换移动到 <script> 标签。

<script lang="ts">
  function onClick(e: MouseEvent) { ... }
</script>
<button on:click={onClick}></button>

如果您的事件是来自 child 使用 createEventDispatcher 的自定义事件，您的 e 事件将被键入为 CustomEvent<any>，您可以对其进行类型转换在 <script> 中随心所欲。

<script lang="ts">
  let elems = [1,2,3];
  
  function onClick(e: CustomEvent<{foo: string}>, el: number) {
    console.log(e.detail.name);
  }
<script>
{#each elems as el}
  <CustomComponent on:itemClick={e => onClick(e, el)}></CustomComponent>
{/each}

如果您仍然遇到隐式任何错误，请尝试在 tsconfig.json.

中关闭 noImplicitAny

Svelte TypeScript：向事件处理程序添加类型时出现意外的 tokensvelte（解析错误）

Svelte TypeScript: Unexpected tokensvelte(parse-error) when adding type to an event handler

typescript

svelte