Using TypeScript to maintain the context of class methods as event handlers within the "this" instance

Question

Using TypeScript to maintain the context of class methods as event handlers within the "this" instance

I'm facing a challenge with TypeScript Classes where I constantly need to use Function.bind() to link HTML Element events to the current instance.

class VideoAdProgressTracker extends EventDispatcher
{
    private _video:HTMLVideoElement;

    constructor(video:HTMLVideoElement)
    {
        super();
        this._video = video;
        this._video.addEventListener("timeupdate", this.handleTimeUpdateEvent);
    }

    private handleTimeUpdateEvent(event)
    {
        // Something
    }
}

It gets messy having to save the bound anonymous function repeatedly, especially when dealing with multiple events. I wish there was a simpler way to keep it bound without all the extra steps.

Any ideas for simplifying this process?

class events typescript methods listener

Answer 1

Answer №1

Utilizing arrow functions for listener methods is a convenient option:

class VideoAdProgressTracker extends EventDispatcher {
    private _video:HTMLVideoElement;

    constructor(video:HTMLVideoElement) {
        super();
        this._video = video;
        this._video.addEventListener("timeupdate", this.handleTimeUpdateEvent);
    }

    private handleTimeUpdateEvent = (event) => {
        // Something
    }
}

This approach works well, unless you intend to extend the class and customize one of these methods.
The use of arrow functions means that these are not technically methods but properties set with arrow functions, separate from the prototype chain.

For instance:

class A {
    fn1 = () => { }
    fn2() { }
}

Results in:

var A = (function () {
    function A() {
        this.fn1 = function () { };
    }
    A.prototype.fn2 = function () { };
    return A;
}());

If overriding methods is not a concern, then arrow functions can be used without issue.

To maintain using traditional methods without manually binding each one, consider:

constructor(video:HTMLVideoElement) {
    super();
    this._video = video;

    for (let key in this) {
        if (typeof this[key] === "function") {
            this[key] = this[key].bind(this);
        }
    }

    this._video.addEventListener("timeupdate", this.handleTimeUpdateEvent);
}

You can also differentiate and bind specific methods based on their names.

Answer 2

Utilizing arrow functions for listener methods is a convenient option:

class VideoAdProgressTracker extends EventDispatcher {
    private _video:HTMLVideoElement;

    constructor(video:HTMLVideoElement) {
        super();
        this._video = video;
        this._video.addEventListener("timeupdate", this.handleTimeUpdateEvent);
    }

    private handleTimeUpdateEvent = (event) => {
        // Something
    }
}

This approach works well, unless you intend to extend the class and customize one of these methods.
The use of arrow functions means that these are not technically methods but properties set with arrow functions, separate from the prototype chain.

For instance:

class A {
    fn1 = () => { }
    fn2() { }
}

Results in:

var A = (function () {
    function A() {
        this.fn1 = function () { };
    }
    A.prototype.fn2 = function () { };
    return A;
}());

If overriding methods is not a concern, then arrow functions can be used without issue.

To maintain using traditional methods without manually binding each one, consider:

constructor(video:HTMLVideoElement) {
    super();
    this._video = video;

    for (let key in this) {
        if (typeof this[key] === "function") {
            this[key] = this[key].bind(this);
        }
    }

    this._video.addEventListener("timeupdate", this.handleTimeUpdateEvent);
}

You can also differentiate and bind specific methods based on their names.

Answer 3

Answer №2

Utilizing the controller context in caching is a technique I frequently employ, especially when engaging with d3.js. This allows me to maintain connection to the callback context, typically referencing a DOM element in d3.

private onClick(): Function {
  const controller = this;
  return function(event) {
    controller.anotherClassFunction();
  };
}

private handleSecondFunction(): void {
  this.addEventListener(this.onClick());
}

Answer 4

Utilizing the controller context in caching is a technique I frequently employ, especially when engaging with d3.js. This allows me to maintain connection to the callback context, typically referencing a DOM element in d3.

private onClick(): Function {
  const controller = this;
  return function(event) {
    controller.anotherClassFunction();
  };
}

private handleSecondFunction(): void {
  this.addEventListener(this.onClick());
}

Using TypeScript to maintain the context of class methods as event handlers within the "this" instance

Answer №1

Answer №2

Similar questions

The designated <input type=“text” maxlength=“4”> field must not include commas or periods when determining the character limit

Issues with Next.js and Framer Motion

What is the best way to automatically focus on my input when the page loads?

Using the input type 'number' will result in null values instead of characters

How to avoid property name conflicts when extending interfaces in Typescript

Error: Unable to access the property of an undefined variable in Angular 4

SlidingPane header in React disappearing behind Nav bar

Suggestions for managing the window authentication popup in Protractor when working with Cucumber and TypeScript?

Versatile functions and unique index classifications

Troubleshooting Firebase: How come my code is only accessing the initial document in my Collection?

How is it possible to encounter a CORS issue while using axios?

Trouble with Mui theme not being applied when inside a wrapper component

Implementing Dynamic Updates to a Google Sheets Custom Menu using Typescript

Is it possible to loop through each row in a table using Cypress and execute the same actions on every iteration?

Managing DOM elements within a Vue 3 template using Typescript

Creating a game of Black Jack using a prebuilt deck class

What am I doing incorrectly with my class implementation?

Is there a way to stop all HTML5 videos except for the one that I want to watch?

Tips on typing the onFocus function event parameter for a Material UI Input component

How to retrieve the default type returned by a function using a custom TypeMap