Enhancing EventTarget in TypeScript (Angular 2+) for ES5 compilation

Question

Enhancing EventTarget in TypeScript (Angular 2+) for ES5 compilation

Is there a way to create a custom class that extends the EventTarget DOM API class?

Let's say we have the following class:

class MyClass extends EventTarget {        

  constructor() {
    super();
  }

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

}

However, upon instantiation, an error is encountered:

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

This issue seems to stem from the requirement of proper ES2015 classes for this API to function, whereas code transpilation is done at the ES5 level.

If attempting to use the following constructor instead:

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

A new error arises when trying to invoke addEventListener():

```
ERROR TypeError: Illegal invocation
```
.

In addition, a TypeScript compilation error occurs:

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

.

angular typescript dom es6-class

Answer 1

Answer №1

To simplify the solution, one approach could be to implement the EventTarget interface but delegate the actual implementation to an existing class such as DocumentFragment.

Another option is to extract this functionality into a reusable class:

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);
  }

}

Then, this new class can serve as a parent for our original class:

class MyClass extends DelegatedEventTarget {

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

}

Using this method will maintain typings and ensure compatibility when compiling down to ES5.

Answer 2

To simplify the solution, one approach could be to implement the EventTarget interface but delegate the actual implementation to an existing class such as DocumentFragment.

Another option is to extract this functionality into a reusable class:

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);
  }

}

Then, this new class can serve as a parent for our original class:

class MyClass extends DelegatedEventTarget {

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

}

Using this method will maintain typings and ensure compatibility when compiling down to ES5.

Enhancing EventTarget in TypeScript (Angular 2+) for ES5 compilation

Answer №1

Similar questions

Create a debounced and chunked asynchronous queue system that utilizes streams

Encountered a problem while installing an npm package for Angular 2

Moving the layout container towards the left: a quick guide

Re-evaluating information when the query parameter is modified?

Dealing with the endless looping problem in Next.js caused by useEffect

Apollo-Server presents errors in a polished manner

[Heroku][Angular] Dealing with "Template parse errors" upon deploying my application

Awaiting a response from the http.get() function

Issues with loading Angular 4 Bootstrap JS post compiling

Is there a way to organize this array based on the group score?

Identifying modifications within the @Input property in Angular 4

How can I obtain the rowIndex of an expanded row in Primeng?

The concept of Typescript involves taking a particular type and generating a union type within a generic interface

How to efficiently retrieve automatically generated elements by ID in Angular 2

`Running ng serve will result in the creation of a 'dist' folder within each app sub

Angular 2, the change event is not triggering when a bootstrap checkbox is clicked

Experiencing a 404 error while attempting to revoke access token using Google OAuth2 revoke endpoint

Dividing an array into categories with typescript/javascript

Elastic Beanstalk hosted apps do not support the transmission of large files

Utilizing Async Storage for Language Localization