React中图片元素事件监听的类型标注错误问题问询

你错误地使用了React的合成事件类型React.ChangeEvent<HTMLImageElement>，但这里是直接操作原生DOM的Image实例，添加的是原生DOM事件监听器，对应的回调参数应该用原生Event类型，而非React合成事件类型。

正确的类型标注写法 #

方式1：类型断言

直接将事件的target断言为HTMLImageElement，明确其类型：

const imageFound = (e: Event) => {
  const imgTarget = e.target as HTMLImageElement;
  imgTarget.src && found.push(imgTarget.src);
};

const imageNotFound = (e: Event) => {
  const imgTarget = e.target as HTMLImageElement;
  window?.console && console.warn("Preload image failed!", imgTarget.src);
};

方式2：类型守卫（更安全）

通过类型守卫判断target的实际类型，避免断言可能带来的风险：

const imageFound = (e: Event) => {
  if (e.target instanceof HTMLImageElement) {
    e.target.src && found.push(e.target.src);
  }
};

const imageNotFound = (e: Event) => {
  if (e.target instanceof HTMLImageElement) {
    window?.console && console.warn("Preload image failed!", e.target.src);
  }
};

原因说明 #

React的合成事件（如ChangeEvent）仅适用于React组件上绑定的事件（比如<input onChange={...} />），而你这里是通过new Image()创建原生DOM元素，调用原生addEventListener绑定事件，此时回调接收的是浏览器原生的Event对象，它的target默认是EventTarget类型，没有src属性，所以需要通过类型断言或守卫来指定为HTMLImageElement，才能安全访问src属性。

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