在Typescript和React中使用Abort信号删除事件处理程序

Question

我正在构建一个门户，它最终获取类xml文档并在浏览器中显示它们，每当我加载其中一个页面时，我需要将onclick和mouseover处理程序附加到页面上的几个元素。

但是，用户可以在多个页面之间导航，并且我遇到了将多个处理程序附加到单个元素的问题。

所以，我想附加一个包含中止信号的处理程序，这样每当我更改页面时，我都可以暗示中止并立即删除所有处理程序，但我似乎无法让typescript一起发挥作用。

代码示例:

export const attachElementModifiers = (
elementObject: { [key: string]: Element },
elementPointerClass: string,
listener: (evt: any) => void,
onHoveringHandler: (_evt: any, key: string) => void,
onMouseOutHandler: (_evt: any) => void,
controller: AbortController
): void => {
for (const [key] of Object.entries(elementObject)) {
elementObject[key].classList.add(elementPointerClass)
elementObject[key].addEventListener('click', listener)
elementObject[key].addEventListener('mouseover', (_evt: any) =>
onHoveringHandler(_evt, key)
)
elementObject[key].addEventListener(
'mouseleave',
(_evt: any) => onMouseOutHandler(_evt),
{ signal: controller.signal }  // <---- ERROR HERE
)
}
}

总是显示以下错误:

No overload matches this call.
Overload 1 of 2, '(type: keyof ElementEventMap, listener: (this: Element, ev: Event) => any, options?: boolean | AddEventListenerOptions | undefined): void', gave the following error.
Argument of type '"mouseleave"' is not assignable to parameter of type 'keyof ElementEventMap'.
Overload 2 of 2, '(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void', gave the following error.
Argument of type '{ signal: AbortSignal; }' is not assignable to parameter of type 'boolean | AddEventListenerOptions | undefined'.
Object literal may only specify known properties, and 'signal' does not exist in type 'AddEventListenerOptions'.ts(2769)

我知道在lib.dom.d中存在AbortSignal。但是，我不确定如何在这里正确使用它。

Answer 1

可以通过

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

options对象正在导致这个错误，即使它有与AddEventListenerOptions接口匹配的属性，它仍然需要被告知它是一个AddEventListenerOptions。