Antwoord

In TypeScript kan het type this expliciet worden aangegeven in de functiehandtekeningen. Dit wordt gebruikt voor methoden van objecten en klassen, om te zorgen voor de juiste typecheck van de aanroepcontext.

Voorbeeld van het instellen van het type this:

interface Person {
  name: string;
  greet(this: Person): void;
}
const person: Person = {
  name: 'Max',
  greet() {
    console.log(`Hallo, ${this.name}!`);
  }
};

Voor functies kan het type this expliciet worden aangegeven – het is de eerste niet-genaamde parameter:

function showName(this: { name: string }) {
  console.log(this.name);
}

Bijzonderheden van pijlfuncties:

• Een pijlfunctie heeft geen eigen this-context. De waarde van this komt uit de omringende scope.
• Daarom kan het type this niet expliciet worden aangegeven voor een pijlfunctie – de handtekening wordt genegeerd.

Waarom is dit nodig? Het helpt om fouten te vangen bij onjuist gebruik van objectmethoden en helpt bij actuele runtime "binding" (bijvoorbeeld in event handlers).

Misleidende vraag

Is het mogelijk om het type this expliciet aan te geven in een pijlfunctie? Wat is het addertje onder het gras?

Antwoord: Nee. Een pijlfunctie legt this vast uit de externe context, en de ECMAScript-specificatie voorziet niet in een eigen waarde voor this binnenin.

const foo = (this: any) => {} // Compilatiefout

Als je this wilt controleren – gebruik dan normale (function) functies.

Voorbeelden van echte fouten door onbekendheid met de nuances van het onderwerp

---

Verhaal

In een webtoepassing werden methods van event handlers geschreven als pijlfuncties met this. Er werd verwacht dat TypeScript bindfouten zou vangen, maar pijlfuncties hebben geen eigen this. Resultaat: verlies van context, vreemde bugs bij het werken met DOM-handlers.

Verhaal

In klassen werden methoden gedeclareerd met een expliciet type this via een normale functie, maar bij het doorgeven van de methode als callback (setTimeout(obj.method, 1000)) ging this verloren, wat leidde tot een runtime-fout. Men vergat de context vast te leggen met bind of een pijlfunctie.

Verhaal

In een bibliotheek voor datamodellering vergaten ze het type this aan te geven voor de methoden van het interface. TypeScript gaf geen foutmelding bij een onjuiste aanroep van de methode met een ongepaste context, maar in productie viel de applicatie uit bij toegang tot niet-bestaande eigenschappen.