Risposta

In TypeScript, il tipo di 'this' può essere specificato esplicitamente nelle firme delle funzioni. Questo viene utilizzato per i metodi degli oggetti e delle classi, per garantire la corretta tipizzazione del contesto di invocazione.

Esempio di definizione del tipo di 'this':

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

Per le funzioni, è possibile specificare esplicitamente il tipo di 'this' come primo parametro non nominato:

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

Caratteristiche delle funzioni freccia:

• Le funzioni freccia non hanno un proprio contesto di 'this'. Il valore di 'this' è preso dall'ambito circostante.
• Pertanto, non è possibile specificare esplicitamente il tipo di 'this' in una funzione freccia: la firma verrà ignorata.

A cosa serve? Permette di catturare errori nell'uso improprio dei metodi degli oggetti, aiuta nel binding runtime corretto (ad esempio, nei gestori di eventi).

Domanda fuorviante

È possibile specificare esplicitamente il tipo di 'this' in una funzione freccia? Qual è la trappola?

Risposta: No. La funzione freccia cattura 'this' dal contesto esterno e la specifica ECMAScript non prevede un proprio valore di 'this' al suo interno.

const foo = (this: any) => {} // Errore di compilazione

Se è necessario controllare 'this', utilizzare funzioni ordinarie (function).

Esempi di errori reali a causa della mancanza di comprensione delle sottigliezze dell'argomento

---

Storia

Nell'applicazione web, i metodi dei gestori di eventi sono stati scritti come funzioni freccia con 'this'. Si sperava che TypeScript catturasse gli errori di binding, ma le funzioni freccia non hanno un proprio 'this'. Risultato: perdita di contesto, bug strani durante il lavoro con i gestori DOM.

Storia

Nelle classi, i metodi sono stati dichiarati con il tipo 'this' esplicito tramite una funzione ordinaria, ma quando il metodo era passato come callback (setTimeout(obj.method, 1000)), 'this' andava perso, causando un errore a runtime. Era stato dimenticato di fissare il contesto tramite bind o una funzione freccia.

Storia

Nella libreria per lavorare con i modelli di dati, è stato dimenticato di specificare il tipo di 'this' per i metodi dell'interfaccia. TypeScript non mostrava errori durante l'invocazione errata di un metodo con un contesto non adatto, ma in produzione l'applicazione falliva quando cercava di accedere a proprietà non esistenti.