TypeScript: komma åt yttre "this" från en inbäddad klassisk funktion utan att bryta linter-regeln "no-this-alias"

Vi använder Airbnbs eslint-konfiguration i vårt TypeScript-projekt, och den inkluderar regeln no-this-alias.

Och det får mig att undra hur jag kan få åtkomst till det yttre this från en inbäddad klassisk funktion, utan att bryta denna regel?

Här är koden:

class MyClass {
 
  name: string;

  target: EventTarget;
 
  constructor(name: string, target: EventTarget) {
    this.name = name;
    this.target = target;
  }
 
  initEventHandlers() {
    const self = this;
    function exampleEventHandler(this: EventTarget, e: Event) {
      console.log(this.somethingFromTheTarget);
      console.log(self.somethingFromMyClass);
    }
    this.target.addEventListener('exampleEvent', exampleEventHandler);
  }
}

Händelsehanteringsfunktionen anropas från händelsebiblioteket och använder fn.call(this, e) för att sätta this till händelseobjektet, i händelsehanterarens scope. Självklart är det inte tillämpligt att använda arrow-funktionen här.

Lintaren har ett problem med raden const self=this;.

Jag vet att detta är tillåtet: const { thisOneProperty }=this, och sedan kan man använda thisOneProperty i den inbäddade funktionens kod. Men det är ingen hjälp när egenskapens värde uppdateras.

Detta fungerar också: const myClass={ t: this };, och sedan kan jag göra myClass.t för att komma åt det. Men det är så fult.

Vad är det "rena" sättet att komma åt MyClass:s this från eventhanteringsfunktionen då?

Svar #1

Testa detta

class MyClass {
 
  name: string;

  target: EventTarget;
 
  constructor(name: string, target: EventTarget) {
    this.name = name;
    this.target = target;
  }
 
  initEventHandlers() {
    const self = {
      somethingFromMyClass: this.somethingFromMyClass.bind(this)
    };

    function exampleEventHandler(this: EventTarget, e: Event) {
      console.log(this.somethingFromTheTarget);
      console.log(self.somethingFromMyClass);
    }
    this.target.addEventListener('exampleEvent', exampleEventHandler);
  }
}