ProgramlamaFrontend Geliştirici

TypeScript'te this tipinin nasıl çalıştığını, nasıl açıkça belirtileceğini ve bunun neden gerekli olduğunu açıklayın? Özellikle ok (arrow) fonksiyonlardaki this ile ilgili nelere dikkat edilmelidir?

Hintsage yapay zeka asistanı ile mülakatları geçin

Cevap

TypeScript'te this tipi, fonksiyonların imzalarında açıkça belirtilebilir. Bu, nesne ve sınıf yöntemlerinin çağrım bağlamının doğru tiplenmesini garanti etmek için kullanılır.

this tipinin belirlenmesi örneği:

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

Fonksiyonlar için this tipi açıkça belirtilebilir — bu, ilk isimsiz parametre olarak gelir:

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

Ok fonksiyonlarının özellikleri:

  • Ok fonksiyonlarının kendi this bağlamı yoktur. this değeri çevresel alanın dışından alınır.
  • Bu nedenle ok fonksiyonunun this tipini açıkça belirtmek mümkün değildir — imza göz ardı edilir.

Bunun gerekliliği nedir? Nesne yöntemlerinin yanlış kullanımı durumunda hataları yakalamaya yardımcı olur, güncel çalışma zamanı "binding" (bağlama) konularında fayda sağlar (örneğin, olay işleyicilerinde).

Sürpriz Soru

Ok fonksiyonunda this tipini açıkça belirlemek mümkün mü? Hilesi nedir?

Cevap: Mümkün değildir. Ok fonksiyonu, dış bağlamdan this'i yakalar ve ECMAScript spesifikasyonu içinde kendi this değerini öngörmez.

const foo = (this: any) => {} // Derleme hatası

this'i kontrol etmek gerekiyorsa — normal (function) fonksiyonları kullanın.

Bu konuyla ilgili gerçek hata örnekleri


Hikaye

Web uygulamasında olay işleyici yöntemleri ok fonksiyonları olarak yazıldı ve this bekleniyordu. TypeScript'in bağlama hatalarını yakalayacağını düşündük, ancak ok fonksiyonları kendi this'e sahip değildir. Sonuç: bağlam kaybı, DOM işleyicileriyle çalışırken tuhaf hatalar.

Hikaye

Sınıflarda, yöntemleri normal fonksiyonlarla açıkça this tipi ile tanımladık, ancak yöntemi bir geri çağırım (callback) olarak geçirmek (setTimeout(obj.method, 1000)) this kayboldu, çalışma zamanı hatası oluştu. Bağlamı bind ile veya ok fonksiyonu ile sabitlemeyi unuttuk.

Hikaye

Veri modelleriyle çalışmak için bir kütüphanede, arayüz yöntemleri için this tipini belirtmeyi unuttuk. TypeScript, yanlış bağlamda bir yöntemi çağırdığımızda hata göstermedi, ancak üretim ortamında var olmayan özelliklere başvurulduğunda uygulama çöktü.