Cevap.

TypeScript'te sınıf içindeki yöntemler için this'in tipi varsayılan olarak mevcut sınıf örneğidir. Ancak, yöntemler ok fonksiyonları ile tanımlandığında, this'in bağlamı beyan edildiği anda sabitlenir, çağrıldığı anda değil.

Normal yöntem:

class Counter {
  value = 0;
  increment() {
    this.value++;
  }
}

Ok fonksiyonu:

class Counter {
  value = 0;
  increment = () => {
    this.value++;
  }
}

İnce noktalar:

• Normal yöntemler, geri çağırma olarak geçirildiklerinde this bağlamını kaybeder (örneğin, olay dinleyicilerine).
• Ok fonksiyonları, bildirilen sınıfın bağlamını korur ancak prototipte görünmez, her örnek için yeni bir fonksiyon oluşturulur.
• Ek kontrol için yöntem imzasında this tipini açıkça belirtebilirsiniz:

class Foo {
  bar(this: Foo) {
    // ...
  }
}

Çeldirici soru.

increment() ve increment = () => {} arasındaki fark nedir? Bu, geri çağırma olarak kullanıldığında this'in bağlamını nasıl etkiler?

Yanlış cevap:

• "Sınıf içinde ve yöntemde fark yok, TypeScript her şeyi anlıyor."

Doğru cevap:

• Normal bir yöntemin this bağlamı çağrıldığı anda belirlenir. Yöntemi bir fonksiyon olarak geçerseniz: setTimeout(counter.increment, 0), this undefined (sıkı modda) veya window (sıkı olmayan modda) olur, oysa ok fonksiyonu kendi çevresini korur:

class Demo {
  value = 1;
  inc() { console.log(this.value); }
  incArrow = () => { console.log(this.value); }
}

const d = new Demo();
setTimeout(d.inc, 0);       // undefined veya hata
setTimeout(d.incArrow, 0);  // 1

Bu konu üzerine bilgi eksikliği nedeniyle gerçek hatalardan örnekler.

---

Hikaye

Reaktif çerçevelere sahip bir projede sınıf yöntemleri doğrudan geri çağırma olarak geçildi ve açık bir bind kullanılmadı. Sonuç olarak this undefined oldu ve uygulama this özelliklerine erişim hatası nedeniyle çöktü. Sorun, yöntemlerin ok fonksiyonları olarak yeniden yazılması veya açık bir bind kullanılmasıyla çözüldü.

---

Hikaye

Geliştirici yöntemde this tipini açıkça belirtti ama bu yöntemin içindeki ok fonksiyonunun tipini unuttu. Sonuç olarak iç içe geçmiş geri çağırmanın içindeki this sınıf örneğine değil, window'a işaret etti. Takım, durum sızıntısıyla karşılaştı ve olay mimarisini yeniden yapmak zorunda kaldı.

---

Hikaye

Büyük bir UI bileşeni uygulamayı yavaşlatıyordu çünkü tüm yöntemler sınıfın ok alanları olarak tanımlanmıştı (new Counter().increment = ...), bu da her örnek için yeni fonksiyon kopyaları yaratıyor, normal bir yöntemle olduğu gibi prototipte tek bir tanım oluşturmuyordu. Sonuç olarak bellek tüketimi arttı ve optimizasyon gerekti.