Kullanıcı olaylarının (custom events) TypeScript'te nasıl tiplenebileceği? Olay nesneleriyle ve veri aktarımıyla çalışırken dikkate alınması gereken incelikler nelerdir?

Cevap.

TypeScript, kullanıcı olaylarını tipize etmek için, özellikle web uygulamalarında veya pub/sub deseninde çalışırken, olay nesneleriyle doğru bir şekilde çalışmayı garanti etmek için olanak sağlar. Olayları tipize etmek için genellikle parametreli generic tip olan CustomEvent kullanılır:

interface MyEventDetail {
  username: string;
  age: number;
}

const event = new CustomEvent<MyEventDetail>('user:create', {
  detail: { username: 'alice', age: 30 }
});

document.addEventListener('user:create', (e: CustomEvent<MyEventDetail>) => {
  console.log(e.detail.username);
});

Ana incelikler:

• Kullanılan olay tipinin (CustomEvent<T>) olay oluşturulduğu ve işlendiği yerde eşleştiğinden emin olun.
• Eğer yerel bir olay kullanıyorsanız, any veya object yerine temel olay türlerini kullanın.
• Kendi türlerinizi oluşturuyorsanız, olayların miras alınmasına dikkat edin.

Yanıltıcı Soru.

Sıkça sorulan: "Bir dış kütüphane tarafından oluşturulan bir olayda event nesnesini doğrudan CustomEvent<Type> olarak tipize edebilir miyiz?"

Doğru cevap: Sadece kütüphanenin kesinlikle CustomEvent ile generic olarak olaylar ürettiğinden emin olunursa. Aksi takdirde, tipleme hatalı olacaktır ve çalışma zamanı hataları meydana gelebilir.

Örnek:

document.addEventListener('some-event', (e: Event) => {
  // Hatalı: 'e' her zaman CustomEvent olmayabilir
  const detail = (e as CustomEvent<{ id: number }>).detail;
  // Bu, olay CustomEvent değilse hata verecektir
});

Konuyla ilgili bilgi eksikliğinden kaynaklanan gerçek hatalar örnekleri.

---

Hikaye

Projede pub/sub soyutlaması kullanıyorlardı ve olayları basit Event üzerinden atıyorlardı, bunun yerine CustomEvent kullanmıyorlardı. event.detail erişebileceğimizi beklediler, ancak temel Event nesnesinde böyle bir alan yoktu, bu da sessiz bir undefined ve zor tespit edilen hatalarla sonuçlandı.

---

Hikaye

Ekibin bir kısmı, farklı senaryolar için işleyicileri daha "hızlı" entegre etmek için özel olayları any ile tipize etti. Sonuç olarak, daha sonra detay aracılığıyla farklı veri yapılarının aktarılmasından kaynaklanan hatalar ortaya çıkmaya başladı ve TypeScript uyumsuzlukları belirlemedi.

---

Hikaye

Bir projede olayları CustomEvent<string> olarak tipize etmeye başladılar, bu sırada karmaşık nesneleri detail üzerinden geçiriyorlardı. Hata ile detail'i serileştirdiler, bu da işleyicide ek bir JSON.parse yapma zorunluluğuna ve TypeScript içindeki tip kaybına yol açtı.