有没有办法实际创建一个类,它将扩展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
接口,但是将实际的实现委托给一些现有的类,比如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后继续存在。