Özet - Discriminated unions
- TypeScript kursu
- İleri seviye
- Ders 32/57
- 4 dk
Discriminated union'larla bir olay işleyici yazarsın.
Özet - Discriminated unions
Discriminated union'lar, bir veri akışındaki farklı olayları tek bir tür altında modellemek için idealdir. Her olay kendi discriminant değeriyle ayrılır; switch ifadesi güvenli dallanma sağlar. Yeni olay eklendiğinde, tüm case'leri güncellemek zorunlu olduğu için derleyici eksiklikleri yakalar.
type Action =
| { type: "add"; item: string }
| { type: "remove"; id: number }
| { type: "clear" };
function apply(a: Action): string {
switch (a.type) {
case "add": return `added ${a.item}`;
case "remove": return `removed ${a.id}`;
case "clear": return "cleared";
}
}Uygulama Olay işleyici yaz
Action discriminated union türünü tanımla: "add" (item: string), "remove" (id: number), "clear" üyeleri, type discriminant alanıyla. apply(a: Action): string fonksiyonunu switch (a.type) ile yaz. add için `added ${a.item}`, remove için `removed ${a.id}`, clear için "cleared" döndür. console.log(apply({ type: "add", item: "apple" })), console.log(apply({ type: "remove", id: 7 })), console.log(apply({ type: "clear" })) ile sonuçları yazdır.
Başlangıç kodu
// Action discriminated union türünü tanımla (type discriminant, add, remove, clear üyeleri)
// apply fonksiyonunu discriminant kontrolüyle switch ile yaz
// add, remove ve clear olaylarının sonuçlarını yazdırÖrnek çözüm
type Action =
| { type: "add"; item: string }
| { type: "remove"; id: number }
| { type: "clear" };
function apply(a: Action): string {
switch (a.type) {
case "add":
return `added ${a.item}`;
case "remove":
return `removed ${a.id}`;
case "clear":
return "cleared";
}
}
console.log(apply({ type: "add", item: "apple" }));
console.log(apply({ type: "remove", id: 7 }));
console.log(apply({ type: "clear" }));Beklenen çıktı
added apple removed 7 cleared
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Discriminated union'a yeni bir üye eklendiğinde ne olur?
- Çalışma zamanı hatası alınır
- Switch case'leri eksikse derleyici uyarır Doğru cevap
- Union bir diziye dönüşür
- Mevcut case'ler otomatik güncellenir
Açıklama: Yeni üye eklendiğinde, switch case'leri artık tüm üyeleri kapsamaz; TypeScript eksik case'i derleme zamanında uyarır ve güvenlik sağlar.
2 clear olayını işle
type Action =
| { type: "add"; item: string }
| { type: "remove"; id: number }
| { type: "clear" };
function apply(a: Action): string {
switch (a.type) {
case "add": return `added ${a.item}`;
case "remove": return `removed ${a.id}`;
case ____: return "cleared";
}
}type Action =
| { type: "add"; item: string }
| { type: "remove"; id: number }
| { type: "clear" };
function apply(a: Action): string {
switch (a.type) {
case "add": return `added ${a.item}`;
case "remove": return `removed ${a.id}`;
case "clear": return "cleared";
}
}Açıklama: case "clear", Action union'ının clear üyesine daraltır; bu üye ekstra alan içermediği için yalnızca sabit dize döndürülür.
3 Discriminated unions özet eşleştirmesi
| Kavram | Anlamı |
|---|---|
Discriminated union |
etiketli üye birleşimi |
Discriminant alan |
her üyede farklı literal değer |
switch ifadesi |
üye bazında dallanma |
Yeni üye ekleme |
eksik case'i derleyici yakalar |