React TypeScript代码类型安全优化：解决EventTarget无files属性报错

这个错误是因为TypeScript无法确定e.nativeEvent.target的具体DOM类型，EventTarget是通用类型，本身没有files属性。你可以通过以下两种方式解决：

方案1：使用currentTarget（更推荐） #

FormEvent<HTMLInputElement>的currentTarget已经被TypeScript推断为HTMLInputElement类型，直接访问即可：

<Input onChange={(e: FormEvent<HTMLInputElement>) => onChangeImage(e.currentTarget.files?.[0])} />

方案2：类型断言nativeEvent.target #

如果必须使用nativeEvent.target，可以通过类型断言明确告诉编译器它是HTMLInputElement：

<Input onChange={(e: FormEvent<HTMLInputElement>) => {
  const fileInput = e.nativeEvent.target as HTMLInputElement;
  onChangeImage(fileInput.files?.[0]);
}} />

补充说明 #

• 两种方案都保留了?.可选链操作符，用来处理files可能为null的情况（比如用户未选择文件时），避免运行时错误。
• 优先选择currentTarget，因为它的类型由FormEvent的泛型参数直接推断，无需额外断言，类型安全性更高。

内容的提问来源于stack exchange，提问作者Kengdum2002