使用 Preact + Typescript 的类型安全事件处理程序答案

【问题标题】：Typesafe event handlers with Preact + Typescript使用 Preact + Typescript 的类型安全事件处理程序
【发布时间】：2020-01-02 19:02:27
【问题描述】：

我正在使用 Preact 编写一个简单的组件，它使用 onChange 处理程序来处理 <input/> 元素：

function Example(props: {}) {
  return <input onChange={(e) => {
    const { value } = e.currentTarget;
    console.log(value);
  }} />
}

上面的代码会产生以下错误：

Property 'value' does not exist on type 'EventTarget'.ts(2339)

最快的解决方法是进行类型转换：

    const el = (e.currentTarget as HTMLInputElement).value;

但我不想将类型转换添加到应用程序以进行这种常见的操作。

在不使用类型转换或any 类型的情况下编写表单事件处理程序的正确方法是什么？

环境信息：

【问题讨论】：

【解决方案1】：

免责声明：我在 Preact 工作。

这是我们当前的 Preact 类型中的一个错误。这些与preact npm 包本身一起分发。这是我们的跟踪器中与此相关的一个问题：https://github.com/preactjs/preact/issues/1930

【讨论】：