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

jdn*_*jdn 6 types typescript svelte svelte-3

我在我的 svelte 项目中使用 Typescript,我需要为我的事件定义强类型。但我找不到任何方法可以做到这一点。

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

任何人都可以帮助我!

dum*_*umm 11

就您而言,您正在寻找类型KeyboardEvent。如果您还想输入您的target,则需要将其强制转换到函数体内。原因是不可能静态地知道事件处理程序与调度事件的元素位于同一元素上,因此谨慎输入会出错(请参阅https://github.com/sveltejs/language-工具/问题/579了解更多信息)。所以解决方案看起来像这样:

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

可以确定的是currentTarget,您可以为其创建自己的帮助器类型:

export type WithTarget<Event, Target> = Event & { currentTarget: Target };
Run Code Online (Sandbox Code Playgroud)

用法:

export type WithTarget<Event, Target> = Event & { currentTarget: Target };
Run Code Online (Sandbox Code Playgroud)

一般来说,TypeScript 附带一个标准接口库,用于定义可能的 DOM 事件,这些事件是根据 MDN 的事件描述建模的,如下所示:https: //developer.mozilla.org/de/docs/Web/API/KeyboardEvent