Tür Güvenli emit ve on
Yük gönderirken ve dinlerken doğru yüklerin kullanılmasını zorunlu kılın.
Tür Güvenli emit ve on, CoddyKit'te ücretsiz bir TypeScript Academy dersidir. Bu, 4 dersinin 2. 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.
Tür Güvenli bir emit İmzası
emit işlevini olay adı K için genelleştirin. Böylece yük parametresi Events[K] olur ve ad ile yük eşleşmek zorunda kalır.
interface Events { login: { userId: string }; logout: void }
function emit<K extends keyof Events>(event: K, payload: Events[K]) {
console.log("emit", event, JSON.stringify(payload));
}
emit("login", { userId: "u1" });Yanlış Yük Derleme Hatasıdır
Yük olay adıyla eşleşmezse TypeScript bunu reddeder. Genel tür, iki parametreyi birbirine bağlar.
interface Events { login: { userId: string } }
function emit<K extends keyof Events>(event: K, payload: Events[K]) {}
// emit("login", { id: "u1" }); // Error: id is not userId
emit("login", { userId: "u1" });
console.log("ok");Bilinmeyen Olay Adları Reddedilir
K extends keyof Events olduğundan, eşlemede bulunmayan bir olayı yayınlayamazsınız.
interface Events { login: { userId: string } }
function emit<K extends keyof Events>(event: K, payload: Events[K]) {}
// emit("signup", { userId: "x" }); // Error: "signup" not a key
emit("login", { userId: "x" });
console.log("only known events");on ile Türlendirilmiş İşleyiciler
on yöntemi, bağımsız değişkeni tam olarak Events[K] olan bir işleyici kaydeder; böylece işleyiciler doğru türde yükler alır.
interface Events { login: { userId: string }; logout: void }
function on<K extends keyof Events>(event: K, handler: (payload: Events[K]) => void) {
console.log("subscribed to", event);
}
on("login", (p) => console.log(p.userId));İşleyici Bağımsız Değişkeni Çıkarılır
İşleyici parametresine tür belirtmezsiniz; TypeScript bunu olay adından çıkarır ve işleyici gövdesinin tamamında otomatik tamamlama sağlar.
interface Events { message: { text: string } }
function on<K extends keyof Events>(event: K, handler: (p: Events[K]) => void) {}
on("message", (p) => {
// p is { text: string }
console.log(p.text.toUpperCase());
});Yüksüz Olayları İşleme
void olaylarında işleyici basitçe kullanılabilir bir bağımsız değişken almaz. İşleyicisini veri olmadan çağırabilirsiniz.
interface Events { logout: void }
function on<K extends keyof Events>(event: K, handler: (p: Events[K]) => void) {}
on("logout", () => console.log("logged out"));emit ve on İşlevlerini Birleştirme
emit ve on birlikte türlendirilmiş bir yayınla/abone ol sistemi oluşturur. Bir olayın yayınlanması, doğru türdeki yükü işleyicilerine iletir.
interface Events { ping: { at: number } }
type Handler<K extends keyof Events> = (p: Events[K]) => void;
const handlers: { ping: Handler<"ping">[] } = { ping: [] };
function on<K extends keyof Events>(e: K, h: Handler<K>) { handlers[e].push(h as Handler<"ping">); }
function emit<K extends keyof Events>(e: K, p: Events[K]) { handlers[e].forEach(h => h(p as Events["ping"])); }
on("ping", p => console.log("at", p.at));
emit("ping", { at: 5 });Yük Konumunu Kısıtlama
Genel tür, yük bağımsız değişkeninin seçilen olayla eşleşmesini sağlar ve uyumsuzlukları işleyicinin derinliklerinde değil, çağrı noktasında yakalar.
interface Events { add: { x: number; y: number } }
function emit<K extends keyof Events>(e: K, p: Events[K]) {
return e;
}
emit("add", { x: 1, y: 2 });
// emit("add", { x: 1 }); // Error: y missing
console.log("payload checked");Olay Adları İçin Otomatik Tamamlama
İlk parametre keyof Events olduğundan, düzenleyiciler çağrıyı yazarken geçerli olay adlarını otomatik olarak tamamlar.
interface Events { open: void; close: void }
function emit<K extends keyof Events>(e: K, p: Events[K]) {}
// Typing emit(" suggests "open" and "close"
emit("open", undefined as void);
console.log("autocompleted names");Genel Türler Burada Neden Gereklidir?
Genel tür olmadan her olay için aşırı yüklemeler yazmanız gerekirdi. Tek bir genel tür imzası, herhangi bir sayıdaki olaya otomatik olarak ölçeklenir.
interface Events { a: { x: number }; b: { y: string } }
function emit<K extends keyof Events>(e: K, p: Events[K]) { return p; }
console.log(emit("a", { x: 1 }), emit("b", { y: "hi" }));Yeniden Kullanılabilir Bir Kalıp
Bu emit<K>(event, payload) ve on<K>(event, handler) kalıbı, tür güvenli her yayıcının temelidir; bunu sonraki derste bir sınıf içinde paketleyeceğiz.
interface Events { tick: { n: number } }
function emit<K extends keyof Events>(e: K, p: Events[K]) { return e; }
function on<K extends keyof Events>(e: K, h: (p: Events[K]) => void) { return e; }
console.log(emit("tick", { n: 1 }), on("tick", p => p.n));Hızlı Kontrol: Türlendirilmiş emit ve on
Tür güvenli emit ve on konusundaki anlayışınızı sınayın.
Özet: Tür Güvenli emit ve on
Yükün Events[K] olduğu genel tür emit ve on imzaları oluşturdunuz; böylece olay adları otomatik tamamlanır, yanlış yükler derleme hatasına dönüşür ve işleyici bağımsız değişkenleri çıkarılır.
interface Events { login: { userId: string } }
function emit<K extends keyof Events>(e: K, p: Events[K]) { return e; }
console.log(emit("login", { userId: "u1" }));Sıkça Sorulan Sorular
“Tür Güvenli emit ve on” dersi ücretsiz mi?
Evet — “Tür Güvenli emit ve on” 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.
“Tür Güvenli emit ve on” dersinde ne öğreneceğim?
Yük gönderirken ve dinlerken doğru yüklerin kullanılmasını zorunlu kılın. 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 2. dersidir.
“Tür Güvenli emit ve on” 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