Svelte 中事件处理程序的事件类型打字稿

Question

我在我的 svelte 项目中使用 Typescript，我需要为我的事件定义强类型。但是我找不到任何方法。

<script lang="ts">
  const onKeyUp = (event: [type here]) => {
    console.log({ event })
    // const {target, keyCode} = event
  }
</script>
<input type="text" on:keyup={onKeyUp} />

任何人都可以帮助我！

Answer 1

在您的情况下，您正在寻找 KeyboardEvent 类型。如果您还想输入 target，则需要将其强制转换到函数体内。原因是不可能静态地知道事件处理程序与调度事件的元素位于同一元素上，因此输入错误是出于谨慎（有关详细信息，请参阅 https://github.com/sveltejs/language-tools/issues/579）。所以解决方案看起来像这样：

<script lang="ts">
  const onKeyUp = (event: KeyboardEvent) => {
    // ...
    (event.target as HTMLInputElement)...;
  }
</script>
<input type="text" on:keyup={onKeyUp} />

您可以确定的是 currentTarget，您可以为其创建自己的帮助程序类型：

export type WithTarget<Event, Target> = Event & { currentTarget: Target };

用法：

<script lang="ts">
  import type { WithTarget } from './path/to/your/types/file.ts';
  const onKeyUp = (event: WithTarget<KeyboardEvent, HTMLInputElement>) => {
    // ...
  }
</script>
<input type="text" on:keyup={onKeyUp} />

一般来说，TypeScript 带有一个标准的接口库，它定义了可能的 DOM 事件，这些事件是根据 MDN 的事件描述建模的，例如：https://developer.mozilla.org/de/docs/Web/API/KeyboardEvent

Svelte 中事件处理程序的事件类型打字稿

Event type typescript for event handler in Svelte

types

typescript

svelte

svelte-3