Réponse

En TypeScript, le type this peut être explicitement défini dans les signatures de fonction. Cela est utilisé pour les méthodes des objets et des classes, afin de garantir le typage correct du contexte d'appel.

Exemple de définition du type this :

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

Pour les fonctions, on peut explicitement spécifier le type this — il vient en premier comme paramètre non-nommé :

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

Particularités des fonctions fléchées :

• Une fonction fléchée n'a pas de contexte this propre. La valeur de this est récupérée du champ lexical environnant.
• Par conséquent, il est impossible d'indiquer explicitement le type this pour une fonction fléchée — la signature sera ignorée.

Pourquoi est-ce nécessaire ? Cela permet de détecter des erreurs lorsque les méthodes des objets sont utilisées de manière incorrecte, et aide à un « binding » Runtime dynamique approprié (par exemple, dans les gestionnaires d'événements).

Question piège

Peut-on indiquer explicitement le type this pour une fonction fléchée ? Quelle est la piège ?

Réponse : Non. La fonction fléchée capture this du contexte extérieur, et la spécification ECMAScript ne prévoit pas de valeur this propre à l’intérieur d’elle.

const foo = (this: any) => {} // Erreur de compilation

Si vous devez contrôler this — utilisez des fonctions normales (function).

Exemples réels d'erreurs dues à l'ignorance des subtilités du sujet

---

Histoire

Dans une application web, les méthodes des gestionnaires d'événements étaient écrites comme des fonctions fléchées avec this. On s'attendait à ce que TypeScript détecte les erreurs de liaison, mais les fonctions fléchées n'ont pas de this propre. Résultat : perte de contexte, bugs étranges lors de l'interaction avec des gestionnaires DOM.

Histoire

Dans les classes, les méthodes étaient déclarées avec un type this explicite via une fonction normale, mais lors de la transmission de la méthode comme un callback (setTimeout(obj.method, 1000)), this était perdu, provoquant une erreur d'exécution. On avait oublié de fixer le contexte via bind ou une fonction fléchée.

Histoire

Dans une bibliothèque de modèles de données, on a oublié de spécifier le type this pour les méthodes de l'interface. TypeScript ne signalait pas d'erreur lors de l'appel inapproprié d'une méthode avec un contexte inadapté, mais l'application se plantait en production lors de l'accès à des propriétés inexistantes.