Etkinlik Haritalarının Türünü Belirleme
Etkinlik adlarını yük türleriyle eşleyin.
Etkinlik Haritalarının Türünü Belirleme, CoddyKit'te ücretsiz bir TypeScript Academy dersidir. Bu, 4 dersinin 1. 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.
Olay Eşlemesi Nedir?
Olay eşlemesi, her olay adını yükünün biçimine bağlayan bir arayüzdür. Bir olay sistemi için tek doğru kaynaktır.
interface Events {
login: { userId: string };
logout: void;
}
// "login" carries a payload; "logout" carries none.Adları Yüklere Eşleme
Her özellik anahtarı bir olay adı, değer türü ise yüktür. Bu, tür sisteminin her olayın tam olarak hangi veriyi beklediğini bilmesini sağlar.
interface Events {
message: { text: string; from: string };
typing: { userId: string };
}
const sample: Events["message"] = { text: "hi", from: "ada" };
console.log(sample.text, sample.from);Yüksüz Olaylar
Bazı olaylar veri taşımaz. Geçirilecek hiçbir şey olmadığını belirtmek için bunları void (veya boş bir nesne) ile modelleyin.
interface Events {
open: void;
close: void;
}
// Handlers for these receive no meaningful argument.
console.log("payloadless events use void");Olay Adı Türünü Çıkarma
Eşlemedeki tüm geçerli olay adlarının birleşimini elde etmek için keyof kullanın; bu, işlev parametrelerini kısıtlamak için yararlıdır.
interface Events {
login: { userId: string };
logout: void;
}
type EventName = keyof Events; // "login" | "logout"
const e: EventName = "login";
console.log(e);Yük Türünü Arama
Olay yükü türünü almak için eşlemeyi bir olay adıyla indeksleyin: Events["login"], { userId: string } türündedir.
interface Events {
login: { userId: string };
logout: void;
}
type LoginPayload = Events["login"]; // { userId: string }
const p: LoginPayload = { userId: "u1" };
console.log(p.userId);Daha Kapsamlı Bir Olay Eşlemesi
Gerçek uygulamalarda çok sayıda olay bulunur. Üreticiler ve tüketiciler her zaman anlaşabilsin diye her olayın yük sözleşmesi tek bir yerde açıkça tanımlanır.
interface Events {
cartAdd: { productId: string; qty: number };
cartRemove: { productId: string };
checkout: { total: number };
}
const a: Events["cartAdd"] = { productId: "p1", qty: 2 };
console.log(a.productId, a.qty);Yükler Birleşim Olabilir
Bir yük türü kendi içinde ayırt edici bir birleşim olabilir; böylece tek bir olay, birbiriyle ilişkili çeşitli biçimleri taşıyabilir.
interface Events {
status:
| { kind: "online" }
| { kind: "offline"; since: number };
}
const s: Events["status"] = { kind: "offline", since: 100 };
console.log(s.kind);Yük Türlerini Yeniden Kullanma
Yük türlerini ayrı olarak tanımlayıp eşlemede bunlara başvurabilirsiniz; böylece arayüz düzenli, biçimler ise yeniden kullanılabilir kalır.
type User = { id: string; name: string };
interface Events {
userCreated: User;
userDeleted: { id: string };
}
const u: Events["userCreated"] = { id: "1", name: "Ada" };
console.log(u.name);Eşleme Neden Başıboş Dizelerden Daha İyidir?
Eşleme olmadan olay adları sıradan dizeler, yükler ise any olur. Eşleme; otomatik tamamlama, doğrulama ve bir sözleşme sağlar.
// Loose: emit("login", { usrId: "x" }) typo unnoticed, payload any
// Mapped: the interface forces the correct name and payload shape.
console.log("the map is the contract");API'yi Eşleme Yönlendirir
Sonraki derslerde emit ve on, olay eşlemesine göre genelleştirilecek; tür güvenliğini korumak için keyof ve dizinlenmiş erişim kullanılacaktır.
interface Events {
login: { userId: string };
logout: void;
}
type Name = keyof Events;
type PayloadOf<K extends Name> = Events[K];
const id: PayloadOf<"login"> = { userId: "u" };
console.log(id.userId);Tek Doğru Kaynak
Her şey olay eşlemesinden türetildiği için bir yerdeki yükü değiştirmek, onu kullanan tüm emit çağrılarını ve işleyicileri günceller.
interface Events {
ping: { at: number };
}
const p: Events["ping"] = { at: Date.now() };
console.log(typeof p.at);Hızlı Kontrol: Olay Eşlemeleri
Olay eşlemelerini türlendirme konusundaki anlayışınızı sınayın.
Özet: Olay Eşlemelerini Türlendirme
Olayları adları yüklere eşleyen bir arayüz olarak modellemeyi; yüksüz olaylar için void, adlar için keyof ve yük türleri için dizinlenmiş erişim kullanmayı öğrendiniz. Bu, tür güvenli bir olay sisteminin temelidir.
interface Events { login: { userId: string }; logout: void }
type Name = keyof Events;
const n: Name = "logout";
console.log(n);Sıkça Sorulan Sorular
“Etkinlik Haritalarının Türünü Belirleme” dersi ücretsiz mi?
Evet — “Etkinlik Haritalarının Türünü Belirleme” 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.
“Etkinlik Haritalarının Türünü Belirleme” dersinde ne öğreneceğim?
Etkinlik adlarını yük türleriyle eşleyin. 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 1. dersidir.
“Etkinlik Haritalarının Türünü Belirleme” 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