如何为EventTarget指定类型？两种TS写法差异及报错原因

两种写法的核心差异 #

第一种写法：类型断言强制转换 #

onClick={(e: React.MouseEvent) => {
  const target = e.target as HTMLInputElement;
  target.value = "";
}}

这里用as HTMLInputElement做了类型断言，直接强制告诉TypeScript忽略类型检查，认定e.target就是HTMLInputElement，所以不会触发TS报错。但这种写法存在风险：如果实际触发事件的是input的子元素（比如input内部嵌套了图标），e.target会指向那个子元素，运行时会因找不到value属性抛出错误。

第二种写法：泛型指定事件绑定元素 #

onClick={(e: React.MouseEvent<HTMLInputElement>) => {
  e.target.value = "";
}}

给React.MouseEvent添加的泛型<HTMLInputElement>，作用是指定事件绑定的元素（即e.currentTarget）的类型，而非e.target的类型。

TS报错的原因在于：e.target的类型是EventTarget——DOM事件机制中，target是实际触发事件的元素，它可能是绑定事件的元素本身，也可能是其子元素，TypeScript无法提前确定具体类型，因此不会自动将其推断为HTMLInputElement，自然识别不到value属性。

第二种写法的正确修正 #

如果想利用泛型实现类型安全，应该改用e.currentTarget：

onClick={(e: React.MouseEvent<HTMLInputElement>) => {
  e.currentTarget.value = "";
}}

currentTarget永远指向绑定事件的那个元素，也就是你通过泛型指定的HTMLInputElement，TS能准确推断其类型，既保证类型安全，又不会触发报错。

内容的提问来源于stack exchange，提问作者utg.tdawg