如何使用 Svelte 在输入元素 on:input 操作中使用这种形式的内联解构来转换此目标？

Question

我不知道如何在 Svelte 3 形式中使用这种形式的内联解构在此处转换此 target：

<input
  on:input={({ target: { value } }) => doSomething(value)}
/>

因为打字稿现在抱怨：

Property 'value' does not exist on type 'EventTarget'

我想断言 target 是一个 HTMLInputElement。

我错了吗？

Answer 1

target 是事件起源的元素。对于冒泡事件，这无法静态确定，因此 target 是防御性类型（另请参阅 this issue）。 currentTarget 然而，如您所料，输入为 HTMLInputElement。

<input
  on:input={({ currentTarget: { value } }) => doSomething(value)}
/>

Svelte 标记目前不支持类型转换。解决方法是在脚本标记中声明一个函数并在那里进行转换。

<script lang="ts">
  function onInput(e: Event) {
    const target = e.target as HTMLInputElement;
    ..
  }
</script>

<input
  on:input={onInput}
/>

如何使用 Svelte 在输入元素 on:input 操作中使用这种形式的内联解构来转换此目标？

How to cast this target using this form of inline destructuring in a input element on:input action using Svelte?

typescript

typescript-typings

svelte

svelte-3