typescript Svelte中事件处理程序的事件类型类型脚本

vatpfxk5  于 2022-12-24  发布在  TypeScript
关注(0)|答案(2)|浏览(139)

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

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

任何人都可以帮助我!

0kjbasz6

0kjbasz61#

在你的例子中,你要寻找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,您可以为它创建自己的helper类型:

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

sr4lhrrt

sr4lhrrt2#

这是我唯一能做到的方法

const handleKey = (e: CustomEvent) => {

   const event = e as unknown as KeyboardEvent;
   
   if (event.key === 'Backspace') {
      ...
<TextField bind:value on:keyup={handleKey}>

我不得不定型。
J型

相关问题