在Typescript+React中使用Abort Signal移除事件监听器出现TS报错如何解决

问题根因 #

你遇到的两个报错均为TypeScript类型定义版本不匹配导致：

1. mouseleave 不属于keyof ElementEventMap：低版本TS的DOM类型定义未将mouseleave纳入Element的事件映射表
2. signal 不存在于AddEventListenerOptions：只有TypeScript 4.4及以上版本的lib.dom.d.ts才正式将signal属性加入事件监听配置的类型定义中。

解决方法 #

方案1：升级TypeScript版本（最推荐） #

直接升级到TypeScript 4.4或更高版本，自带的DOM类型定义已完整支持signal配置和mouseleave事件，升级后无需修改业务代码即可解决报错。

注意：如果升级TS后仍报错，检查tsconfig.json的compilerOptions.lib数组是否包含"dom"，确保加载了完整的DOM类型定义。

方案2：修正类型声明（不想升级TS版本时使用） #

给不匹配的字段加显式类型断言，覆盖TS的默认类型校验：

elementObject[key].addEventListener(
  'mouseleave' as keyof ElementEventMap,
  (_evt: any) => onMouseOutHandler(_evt),
  { signal: controller.signal } as AddEventListenerOptions
)

额外优化提示 #

你当前只给mouseleave事件加了signal配置，click和mouseover事件未绑定该信号，切换页面后这两个事件的监听函数仍会残留，建议给所有绑定的事件都加上同一个controller.signal配置，才能实现一次abort清理所有监听的效果：

elementObject[key].addEventListener('click', listener, { signal: controller.signal })
elementObject[key].addEventListener('mouseover', (_evt: any) =>
  onHoveringHandler(_evt, key),
  { signal: controller.signal }
)
elementObject[key].addEventListener(
  'mouseleave' as keyof ElementEventMap,
  (_evt: any) => onMouseOutHandler(_evt),
  { signal: controller.signal } as AddEventListenerOptions
)

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