How do you remove an event listener that uses “this” in TypeScript?

Question

In JavaScript, for an event handler that needs access to private members and functions, I can rely on the function scope of those to be accessible within my event handler functi

Answer 1

In typescript it is difficult to know what the function call is especially when you "bind" it. Such as:

HTML

and some code creating two objects

let x = new MyClass("I am one", "One");
let y = new MyClass("and I am two", "Two");

with MyClass

class MyClass {
    private _myInstance: string;
    constructor(ID: string, domID: string) {
        this._myInstance = ID;
        document.getElementById(domID).addEventListener('click', this.print.bind(this));
    }

    public print() {
        console.log(this._myInstance);
    }
}

You will correct get "I am one" when clicking on the "One" a element and "and I am two" when clicking on the second a element.

The situation is more difficult with removing. You need to add a object variable that has the binding included so the my class changes to:

class MyClass {
    private _myInstance: string;
    private _myDomID: string;
    private _myFunc = this.print.bind(this);
    constructor(ID: string, domID: string) {
        this._myInstance = ID;
        this._myDomID = domID;
        document.getElementById(domID).addEventListener('click', this._myFunc);
    }

    public print() {
        console.log(this._myInstance);
    }

    public cleanUp() {
        document.getElementById(this._myDomID).removeEventListener('click', this._myFunc);
    }

}