如何确定React事件对应的TypeScript参数类型？

这个问题我太有共鸣了——刚上手React+TypeScript的时候，我也每次遇到事件都要谷歌搜类型，后来慢慢摸出几个不用依赖搜索引擎的实用技巧，分享给你：

1. 靠VS Code的智能提示直接看（最省心） #

这是我现在最常用的方法，完全不用离开编辑器：

• 当你写组件的事件属性时（比如<input onChange={} />），把鼠标悬停在onChange上，VS Code会弹出类型提示，里面会明确告诉你这个事件处理函数的参数类型。比如悬停onChange会看到React.ChangeEventHandler<HTMLInputElement>，仔细看就能发现参数是ChangeEvent<HTMLInputElement>。
• 如果你已经写了事件函数，暂时用any占位（比如function onFileSelected(event: any) {}），然后把鼠标悬停在函数里的event变量上，TS会自动推断出它的具体类型，直接复制过来替换any就行。

2. 查看React的类型定义文件 #

React的TypeScript类型都维护在@types/react包里，你可以直接在VS Code里用「Go to Definition」（快捷键F12）跳转查看：

• 比如右键点击ChangeEvent选择「转到定义」，就能看到它的泛型结构：interface ChangeEvent<T = Element> extends SyntheticEvent<T> { ... }，里面会详细说明它适用于哪些元素，包含哪些属性（比如target、currentTarget的类型）。
• 常见的事件类型都在这里：比如MouseEvent<T>、KeyboardEvent<T>、FocusEvent<T>等，每个都对应不同的交互场景，泛型参数填对应的HTML元素类型（比如HTMLButtonElement、HTMLTextAreaElement）就行。

3. 记住几个通用的事件类型模板 #

用多了你会发现，React的事件类型都是有规律的，记几个常用的就能覆盖大部分场景：

• 表单元素的change/input事件：ChangeEvent<HTMLXXXElement>（比如HTMLInputElement、HTMLSelectElement）
• 点击/鼠标事件：MouseEvent<HTMLXXXElement>（比如按钮的onClick）
• 键盘事件：KeyboardEvent<HTMLXXXElement>（比如输入框的onKeyDown）
• 焦点事件：FocusEvent<HTMLXXXElement>（onFocus/onBlur）
• 通用的合成事件：SyntheticEvent<HTMLXXXElement>（如果不确定具体类型，这个是兜底，但不如具体类型好用）

4. 利用TypeScript的自动推断简化代码 #

如果你的事件处理函数是直接写在组件属性里的，不用单独抽成函数，TS会自动帮你推断事件类型：

<input type="file" onChange={(e) => {
  // 这里悬停e就能看到它是ChangeEvent<HTMLInputElement>
  console.log(e.target.files);
}} />

如果之后需要把函数抽出来，直接把推断出的类型复制过去就行。

回到你的例子，onFileSelected的事件参数类型确实是ChangeEvent<HTMLInputElement>，用上面的方法不用谷歌就能快速确定。

内容的提问来源于stack exchange，提问作者me.at.coding