Genel Etkinlik Yayıcı Sınıfı
Sıfırdan yeniden kullanılabilir, türleri belirlenmiş bir etkinlik yayıcı oluşturun.
Genel Etkinlik Yayıcı Sınıfı, CoddyKit'te ücretsiz bir TypeScript Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, TypeScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. TypeScript Academy kursu toplamda 4 dersten oluşur.
Hedef: Türlendirilmiş Bir TypedEmitter Sınıfı
Bir olay eşlemesine E göre genelleştirilmiş, tamamen türlendirilmiş on, off ve emit yöntemlerine sahip, yeniden kullanılabilir bir TypedEmitter<E> sınıfı oluşturacağız.
interface Events { login: { userId: string }; logout: void }
// class TypedEmitter<Events> will manage handlers safely.
console.log("building a typed emitter");Bir İşleyici Tür Takma Adı
Her dinleyicinin doğru yükü alması için olay adına göre parametreleştirilmiş bir işleyici türü tanımlayın.
type Handler<E, K extends keyof E> = (payload: E[K]) => void;
// E[K] is the payload type for event K in map E.
console.log("handler typed by E[K]");listeners Eşlemesi
İşleyicileri olay adına göre anahtarlanmış şekilde depolayın. Eşlenmiş bir tür, her anahtar için doğru türde işleyicilerden oluşan bir dizi sağlar.
class TypedEmitter<E> {
private listeners: { [K in keyof E]?: Array<(p: E[K]) => void> } = {};
}
console.log("listeners map ready");on Uygulaması
on yöntemi, bir işleyiciyi kendi olayına ait diziye ekler ve dizi ilk kez kullanılıyorsa onu oluşturur.
class TypedEmitter<E> {
private listeners: { [K in keyof E]?: Array<(p: E[K]) => void> } = {};
on<K extends keyof E>(event: K, handler: (p: E[K]) => void): void {
(this.listeners[event] ||= []).push(handler);
}
}
console.log("on implemented");emit Uygulaması
emit yöntemi, olayın işleyicilerini arar ve her birini türlendirilmiş yükle çağırır.
class TypedEmitter<E> {
private listeners: { [K in keyof E]?: Array<(p: E[K]) => void> } = {};
on<K extends keyof E>(e: K, h: (p: E[K]) => void) { (this.listeners[e] ||= []).push(h); }
emit<K extends keyof E>(e: K, payload: E[K]): void {
(this.listeners[e] || []).forEach(h => h(payload));
}
}
console.log("emit implemented");off Uygulaması
off yöntemi, daha önce kaydedilmiş bir işleyiciyi diziden filtreleyerek kaldırır.
class TypedEmitter<E> {
private listeners: { [K in keyof E]?: Array<(p: E[K]) => void> } = {};
on<K extends keyof E>(e: K, h: (p: E[K]) => void) { (this.listeners[e] ||= []).push(h); }
off<K extends keyof E>(e: K, h: (p: E[K]) => void) {
this.listeners[e] = (this.listeners[e] || []).filter(x => x !== h);
}
}
console.log("off implemented");Sınıfı Bir Araya Getirme
Burada, sağladığınız herhangi bir olay eşlemesine göre genelleştirilmiş, üç yöntemin tümünü içeren sınıfın tamamı yer alır.
class TypedEmitter<E> {
private listeners: { [K in keyof E]?: Array<(p: E[K]) => void> } = {};
on<K extends keyof E>(e: K, h: (p: E[K]) => void) { (this.listeners[e] ||= []).push(h); }
off<K extends keyof E>(e: K, h: (p: E[K]) => void) { this.listeners[e] = (this.listeners[e] || []).filter(x => x !== h); }
emit<K extends keyof E>(e: K, p: E[K]) { (this.listeners[e] || []).forEach(h => h(p)); }
}
console.log("TypedEmitter complete");TypedEmitter Kullanımı
Somut bir olay eşlemesiyle örneğini oluşturun. Artık on ve emit, bu olaylar için tamamen türlendirilmiştir.
class TypedEmitter<E> {
private listeners: { [K in keyof E]?: Array<(p: E[K]) => void> } = {};
on<K extends keyof E>(e: K, h: (p: E[K]) => void) { (this.listeners[e] ||= []).push(h); }
emit<K extends keyof E>(e: K, p: E[K]) { (this.listeners[e] || []).forEach(h => h(p)); }
}
interface Events { login: { userId: string } }
const bus = new TypedEmitter<Events>();
bus.on("login", p => console.log("hi", p.userId));
bus.emit("login", { userId: "u1" });Tür Hataları Yakalanır
Sınıf, tıpkı bağımsız işlevlerde olduğu gibi bilinmeyen olayları ve yanlış yükleri derleme zamanında reddeder.
class TypedEmitter<E> {
private listeners: { [K in keyof E]?: Array<(p: E[K]) => void> } = {};
on<K extends keyof E>(e: K, h: (p: E[K]) => void) { (this.listeners[e] ||= []).push(h); }
emit<K extends keyof E>(e: K, p: E[K]) { (this.listeners[e] || []).forEach(h => h(p)); }
}
interface Events { ping: { at: number } }
const bus = new TypedEmitter<Events>();
// bus.emit("pong", { at: 1 }); // Error
bus.emit("ping", { at: 1 });
console.log("typed bus");Olay Başına Birden Çok İşleyici
Her olay bir diziyle eşlendiğinden, birçok işleyici kaydedebilir ve bunların tümünü yayınlama sırasında çalıştırabilirsiniz.
class TypedEmitter<E> {
private listeners: { [K in keyof E]?: Array<(p: E[K]) => void> } = {};
on<K extends keyof E>(e: K, h: (p: E[K]) => void) { (this.listeners[e] ||= []).push(h); }
emit<K extends keyof E>(e: K, p: E[K]) { (this.listeners[e] || []).forEach(h => h(p)); }
}
interface Events { tick: { n: number } }
const bus = new TypedEmitter<Events>();
bus.on("tick", p => console.log("a", p.n));
bus.on("tick", p => console.log("b", p.n));
bus.emit("tick", { n: 7 });Genişletebileceğiniz Bir Temel
Bu sınıf sağlam bir temeldir. Sonraki adımda dinleyici bağımsız değişkenlerinin çıkarımını geliştirecek ve once davranışını ekleyeceğiz.
class TypedEmitter<E> {
private listeners: { [K in keyof E]?: Array<(p: E[K]) => void> } = {};
on<K extends keyof E>(e: K, h: (p: E[K]) => void) { (this.listeners[e] ||= []).push(h); }
emit<K extends keyof E>(e: K, p: E[K]) { (this.listeners[e] || []).forEach(h => h(p)); }
}
const bus = new TypedEmitter<{ go: void }>();
bus.on("go", () => console.log("go!"));
bus.emit("go", undefined as void);Hızlı Kontrol: Genel Tür Yayıcı Sınıfı
Genel türdeki olay yayıcı sınıfı konusundaki anlayışınızı sınayın.
Özet: Genel Türdeki Olay Yayıcı Sınıfı
Eşlenmiş bir dinleyici deposuna ve tamamen türlendirilmiş on, off ve emit yöntemlerine sahip TypedEmitter<E> oluşturdunuz. Böylece herhangi bir olay eşlemesi için yeniden kullanılabilir, tür güvenli bir yayınla/abone ol sistemi elde ettiniz.
class TypedEmitter<E> {
private listeners: { [K in keyof E]?: Array<(p: E[K]) => void> } = {};
on<K extends keyof E>(e: K, h: (p: E[K]) => void) { (this.listeners[e] ||= []).push(h); }
emit<K extends keyof E>(e: K, p: E[K]) { (this.listeners[e] || []).forEach(h => h(p)); }
}
const bus = new TypedEmitter<{ hi: { name: string } }>();
bus.on("hi", p => console.log(p.name));
bus.emit("hi", { name: "Ada" });Sıkça Sorulan Sorular
“Genel Etkinlik Yayıcı Sınıfı” dersi ücretsiz mi?
Evet — “Genel Etkinlik Yayıcı Sınıfı” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve TypeScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. TypeScript Academy kursu toplamda 4 dersten oluşur.
“Genel Etkinlik Yayıcı Sınıfı” dersinde ne öğreneceğim?
Sıfırdan yeniden kullanılabilir, türleri belirlenmiş bir etkinlik yayıcı oluşturun. TypeScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
TypeScript Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te TypeScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“Genel Etkinlik Yayıcı Sınıfı” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu TypeScript Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her TypeScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Etkinlik Haritalarının Türünü Belirleme
- Tür Güvenli emit ve on
- Genel Etkinlik Yayıcı Sınıfı
- Dinleyici Bağımsız Değişkenlerini Çıkarma