React + TypeScript 绑定window resize事件出现类型错误如何修复

报错核心原因 #

你代码中为onResize回调参数标注的React.UIEvent是React封装的合成事件类型，仅适用于JSX语法绑定的React组件事件（比如<div onResize={handleResize}>）。
而直接调用window.addEventListener绑定的是浏览器原生事件，回调接收的是浏览器原生UIEvent类型，和React合成事件结构存在差异（React合成事件额外包含nativeEvent、isDefaultPrevented等独有属性），因此触发类型不匹配的报错。

修复方案 #

方案1：替换为原生事件类型（最推荐） #

如果该回调仅用于原生window.resize事件监听，直接将参数类型改为全局原生UIEvent即可：

const onResize = (
  event: UIEvent,
) => {
  // 如果需要访问window实例的属性，可以加类型断言
  console.log((event.target as Window).innerWidth);
};

window.addEventListener("resize", onResize);

方案2：兼容多场景类型 #

如果该回调需要同时支持React合成事件绑定和原生事件绑定，可以使用联合类型标注参数：

const onResize = (
  event: React.UIEvent<Window, "resize"> | UIEvent,
) => {
  // 可通过是否存在nativeEvent属性区分事件类型
  const target = 'nativeEvent' in event ? event.nativeEvent.target : event.target;
  console.log(target);
};

// 两种绑定方式都兼容
window.addEventListener("resize", onResize);
// <div onResize={onResize} />

额外注意 #

在React组件中绑定原生事件时，需要在组件卸载生命周期中调用removeEventListener移除监听，避免内存泄漏。

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