代码之家 › 专栏 › 技术社区 › Duannx

如何在TypeScript中向addEventListener添加被动选项?

typescript angular javascript

Duannx · 技术社区 · 7 年前

options scroll 元素的事件 打字脚本 这样地:

element.addEventListener("scroll", () => { }, { capture: true, passive: true });

但是TypeScript抛出了一个语法错误: Argument of type '{ capture: true, passive: true }' is not assignable to parameter of type 'boolean' .
我知道错误的原因是TypeScript没有定义 options addEventListener . 它只是有 useCapture 论点我们可以在 lib.dom.d.ts :

addEventListener<K extends keyof ElementEventMap>(type: K, listener: (this: Element, ev: ElementEventMap[K]) => any, useCapture?: boolean): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, useCapture?: boolean): void;

我发现了一个未解决的问题 walk around 在github中,但它似乎很复杂,我不确定它是否正确。
顺便提一下,我也想知道为什么TypeScript没有定义 选项 的参数

任何帮助都将不胜感激。谢谢

4 回复 | 直到 7 年前

Fredrik Lundin Grande 7 年前

作为一个 解决方法 对于这种情况,您始终可以将对象投射到 any 类型

(<any>element).addEventListener("scroll", () => { }, { capture: true, passive: true });

这个 任何 类型用于退出typescripts键入系统。这意味着您将处理一个未知类型,您可以以任何方式处理它,而不会让typescript编译器抱怨。

你可以在 any type here

tlt 7 年前

我认为链接github的方法很好。如果你愿意,你可以做内联变体。但归根结底是一样的:

(element.addEventListener as (
      type: string,
      listener: (event: Event) => void,
      options?: { useCapture?: boolean, passive?:boolean }
    ) => void)("scroll", () => { }, {/*here use userCapture & passive*/})

所以你在这里有效地做的是铸造 element.addEventListener 方法并扩展其签名,以便typescript编译器可以接受它。

Titian Cernicova-Dragomir 7 年前

由于Typescript中的接口是开放式的,因此可以添加函数来执行以下操作: Document 通过在应用程序中重新声明接口:

 interface Document {
    addEventListener(event: "scroll", listener: (event: Event) => void, options?: {
        passive?: boolean;
        once?: boolean;
        capture?: boolean;
      }      
  );
}

您将能够使用您定义的重载,或使用dor定义的任何重载(或任何其他方法) 文件

document.addEventListener("scroll", ()=> {}, {
    capture: true,
    once: true
});

document.addEventListener("scroll", ()=> {}, true);

我无法解释为什么不包括它,可能在某些情况下,它会干扰其他重载的方法解析 addEventListener . (注意:我没有对此进行广泛测试,因此您可能会遇到此问题)。

mofojed 3 年前

as unknown as EventListenerOptions 为了让它也能工作,例如。

element.addEventListener("scroll", () => { }, ({ capture: true, passive: true } as unknown) as EventListenerOptions);