Odpowiedź

W TypeScript typ this można jawnie określać w sygnaturach funkcji. Służy to metodom obiektów i klas, aby zapewnić poprawne typowanie kontekstu wywołania.

Przykład określenia typu this:

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

Dla funkcji można jawnie określić typ this — jest on pierwszym nie nazwanym parametrem:

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

Cechy funkcji strzałkowych:

• Funkcje strzałkowe nie mają własnego kontekstu this. Wartość this jest brana z otaczającego kontekstu.
• Dlatego nie można jawnie określić typu this w funkcji strzałkowej — sygnatura zostanie zignorowana.

Po co to potrzebne? Pozwala na wychwytywanie błędów przy niewłaściwym używaniu metod obiektów, pomaga w aktualnym “bindowaniu” podczas działania (np. w obsłudze zdarzeń).

Pytanie z przymrużeniem oka

Czy można jawnie określić typ this w funkcji strzałkowej? Gdzie jest haczyk?

Odpowiedź: Nie można. Funkcja strzałkowa przejmuje this z zewnętrznego kontekstu, a specyfikacja ECMAScript nie przewiduje własnej wartości this wewnątrz niej.

const foo = (this: any) => {} // Błąd kompilacji

Jeśli chcesz kontrolować this — użyj zwykłych (function) funkcji.

Przykłady rzeczywistych błędów z powodu braku znajomości szczegółów tematu

---

Historia

W aplikacji webowej metody obsługi zdarzeń pisano jako funkcje strzałkowe z this. Oczekiwano, że TypeScript wychwyci błędy związane z bindowaniem, ale funkcje strzałkowe nie mają własnego this. Wynik: utrata kontekstu, dziwne błędy podczas pracy z obsługą DOM.

Historia

W klasach metody deklarowano z jawnym typem this przez zwykłą funkcję, ale przy przekazywaniu metody jako callback (setTimeout(obj.method, 1000)) this było tracone, występował błąd wykonywania. Zapomniano o zablokowaniu kontekstu przez bind lub funkcję strzałkową.

Historia

W bibliotece do pracy z modelami danych zapomniano określić typ this dla metod interfejsu. TypeScript nie wyświetlał błędu przy błędnym wywołaniu metody z niewłaściwym kontekstem, ale na produkcji aplikacja padała przy odwołaniu się do nieistniejących właściwości.