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

【问题标题】：Event type typescript for event handler in SvelteSvelte 中事件处理程序的事件类型打字稿
【发布时间】：2021-12-30 00:16:00
【问题描述】：

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

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

任何人都可以帮助我！

【问题讨论】：

标签： typescript types svelte svelte-3

【解决方案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 的基本 on:keyup 类型是 KeyboardEventHandler<HTMLInputElement>。我收到这样的打字稿错误：Type '(event: WithTarget<KeyboardEvent, HTMLInputElement>) => void' is not assignable to type 'KeyboardEventHandler<HTMLInputElement>'
你说得对，我调整了帖子。
这个答案很完美。谢谢