在将TypeScript（Angular 2+）编译为ES5时扩展EventTarget

Question

有没有方法可以创建一个类，该类将扩展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: 派生类的构造函数必须包含一个 'super' 调用。。

- Slava Fomin II

Answer 1

最简单的解决方案是实现“EventTarget”接口，但将实际实现委托给一些现有类，例如“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时生效。

- Slava Fomin II