不使用preact/compat时，Preact事件对象的正确TypeScript类型？

你使用JSX.TargetedEvent的方式完全是Preact原生（不依赖preact/compat）场景下的标准惯用方案，没有问题。

为什么这是最优解？ #

Preact的JSX类型定义中，onInput、onChange这类事件props的类型本身就基于JSX.TargetedEvent实现。比如onInput的类型声明就是：

onInput?: (event: JSX.TargetedEvent<HTMLInputElement, Event>) => void;

单独提取事件处理器时，直接复用这个框架提供的类型，能完美匹配Preact的事件系统设计，无需额外类型断言就能安全访问event.currentTarget.value这类属性。

其他方案的局限性 #

• 直接使用DOM原生Event类型：DOM标准的Event.currentTarget类型是EventTarget，没有value等元素专属属性，必须通过类型断言才能访问，不符合你“避免断言”的需求。
• 带this注解的方式：虽然兼容性问题已修复，但箭头函数本身没有this绑定，无法使用这种写法，而且即使是普通函数，写法也比直接用TargetedEvent繁琐。

可选优化：自定义类型别名 #

如果觉得JSX.TargetedEvent写起来太长，可以自己定义类似React的类型别名，兼顾习惯和原生Preact的类型安全：

import { JSX } from "preact";

// 针对输入框的input/change事件
type InputEvent<T extends HTMLInputElement> = JSX.TargetedEvent<T>;
// 针对下拉框等其他表单元素的change事件
type ChangeEvent<T extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> = JSX.TargetedEvent<T>;

// 使用示例
const onInput = (event: InputEvent<HTMLInputElement>) => {
  console.log(event.currentTarget.value);
};

内容的提问来源于stack exchange，提问作者T.J. Crowder