类型 'EventTarget' 上不存在属性 'value'：2025 解决方案

“类型 'EventTarget' 上不存在属性 'value'”——如何不再恐惧并开始在 TypeScript 中为事件添加类型

您是否曾在 TypeScript 中编写事件处理程序，试图获取 event.target.value——然后立刻看到红色下划线和消息：“类型 'EventTarget' 上不存在属性 'value'”？如果是这样——您并不孤单。在 Stack Overflow 上，这个问题获得了数万次浏览，并且在 2025 年仍然困扰着新手和经验丰富的开发者。

问题不在于 TypeScript “邪恶”或“有缺陷”。恰恰相反：编译器保护您免受那些可能在运行时导致崩溃的愚蠢错误。让我们来弄清楚为什么会出现这个错误以及如何正确地修复它。

为什么 TypeScript 会对 event.target.value 报错？

简短的回答：event.target 的类型是 EventTarget | null。而 EventTarget 没有 value 属性。它只有三个方法：addEventListener、removeEventListener 和 dispatchEvent。

当您编写：

const handleChange = (event: React.ChangeEvent) => {\n  const value = event.target.value; // ❌ 错误！\n};\n

TypeScript 会认为：“嘿，我不知道具体是哪个 HTML 元素触发了这个事件。可能是没有 value 的 <div>，也可能是 <input>——我不确定。因此我拒绝编译这样的代码。”

这是 特性，而非缺陷。TypeScript 强制您明确指定您正在处理的元素类型。

2025 年适用的前 3 种解决方案

有几种方法。我们将介绍最流行且最安全的方法。

1. 通过 as HTMLInputElement 进行类型断言（快速，但需谨慎）

最常见的方法是将 event.target 转换为所需的类型：

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n  const value = (event.target as HTMLInputElement).value;\n  console.log(value);\n};\n

优点：简单、直观、有效。

缺点：如果您弄错了，实际上事件来自 <textarea> 或 <select>，那么您将在运行时得到 undefined。编译器不会警告您。

最好在您 绝对确定 元素类型时使用此方法。例如，在只有一个字段的简单表单中。

2. 使用 event.currentTarget 代替 event.target

在 TypeScript 中，currentTarget 的类型化比 target 更严格。如果您为事件指定了泛型参数，那么 currentTarget 将具有正确的类型：

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n  const value = event.currentTarget.value; // ✅ 无需类型断言即可工作！\n};\n

重要提示：currentTarget 是处理程序所绑定到的元素。如果您绑定到 <input>，那么 currentTarget 将始终是这个 <input>。与 target 不同，后者可能是嵌套元素（例如，按钮内部的 <span>）。

优点：比类型断言更安全，无需编写额外的类型转换。

缺点：并非适用于所有场景——例如，对于事件冒泡，currentTarget 可能与目标元素不一致。

3. 带类型检查的泛型函数（最安全的方法）

如果您想要最大的安全性和可重用性，请编写一个辅助函数来检查元素类型：

function getInputValue(event: Event): string