angular - 在TypeScript(Angular 2+)中扩展EventTarget？

有没有一种实际创建类的方法，该类将扩展EventTarget DOM API类？

考虑一下，我正在上这个类:

class MyClass extends EventTarget {

  constructor() {
    super();
  }

  private triggerEvent() {
    this.dispatchEvent(new Event('someEvent'));
  }

}

当我尝试实例化它时，出现此错误:

ERROR TypeError: Failed to construct 'EventTarget': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

看起来这是由于以下事实造成的:该API需要正确的ES2015类才能正常工作，但是我正在将代码转换为ES5级别。

如果我使用这样的构造函数:

constructor() {
  Reflect.construct(EventTarget, [], MyClass);
}

尝试在实例上调用addEventListener()时遇到以下错误:

ERROR TypeError: Illegal invocation。

副作用是，我还收到此TypeScript编译错误:

error TS2377: Constructors for derived classes must contain a 'super' call.。

最佳答案

最简单的解决方案是实际实现EventTarget接口(interface)，但将实际实现委派给某些现有类，例如DocumentFragment。

另外，我们可以将此功能提取到可重用的类中:

export class DelegatedEventTarget implements EventTarget {

  private delegate = document.createDocumentFragment();


  addEventListener(...args: any): void {
    this.delegate.addEventListener.apply(this.delegate, args);
  }

  dispatchEvent(...args: any): boolean {
    return this.delegate.dispatchEvent.apply(this.delegate, args);
  }

  removeEventListener(...args: any): void {
    return this.delegate.removeEventListener.apply(this.delegate, args);
  }

}

然后，我们可以将其用作初始类的父类:

class MyClass extends DelegatedEventTarget {

  private triggerEvent() {
    this.dispatchEvent(new Event('someEvent'));
  }

}

这将保留类型，并且在编译到ES5之前都将保留下来。

关于angular - 在TypeScript(Angular 2+)中扩展EventTarget？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51343322/