Literal discriminant
- TypeScript kursu
- İleri seviye
- Ders 30/57
- 4 dk
Literal alanlarla ayrıştırma yapmayı öğrenirsin.
Literal discriminant
Discriminant alanının değeri bir literal türüdür; her üye kendi benzersiz literal değerini taşır. kind: "circle" gibi bir değer, TypeScript'e hangi üyede olduğunu söyler. Literal değerlerin kullanımı, daraltmanın kesin ve güvenli olmasını sağlar.
type Event =
| { type: "click"; x: number; y: number }
| { type: "scroll"; offset: number };
function handle(e: Event) {
if (e.type === "click") {
console.log(e.x, e.y); // click member
} else {
console.log(e.offset); // scroll member
}
}Literal değerlerle daraltma
Discriminant literal olduğunda, TypeScript bir eşitlik kontrolüyle union'ı daraltır. e.type === "click" koşulu, Event union'ını yalnızca click üyesine indirir; koşul içinde e.x ve e.y güvenle kullanılır.
function handle(e: Event) {
if (e.type === "click") {
e.x; // number (click üyesi)
e.y; // number (click üyesi)
}
// Burada e.x erişilemez: e tekrar tam Event
}Uygulama Literal discriminant ile olay işle
Event discriminated union türünü tanımla: "click" (x: number, y: number) ve "scroll" (offset: number) üyeleri, type discriminant alanıyla. handle(e: Event): string fonksiyonunu yaz. Eğer e.type === "click" ise `click at ${e.x},${e.y}` döndür; değilse `scroll ${e.offset}` döndür. console.log(handle({ type: "click", x: 10, y: 20 })) ve console.log(handle({ type: "scroll", offset: 5 })) ile sonuçları yazdır.
Başlangıç kodu
// Event discriminated union türünü tanımla (type discriminant, click ve scroll üyeleri)
// handle(e: Event): string fonksiyonunu type kontrolüyle yaz
// click ve scroll olaylarının sonuçlarını yazdırÖrnek çözüm
type Event =
| { type: "click"; x: number; y: number }
| { type: "scroll"; offset: number };
function handle(e: Event): string {
if (e.type === "click") {
return `click at ${e.x},${e.y}`;
}
return `scroll ${e.offset}`;
}
console.log(handle({ type: "click", x: 10, y: 20 }));
console.log(handle({ type: "scroll", offset: 5 }));Beklenen çıktı
click at 10,20 scroll 5
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Discriminant alanın değeri hangi tür olmalıdır?
- Herhangi bir number
- Opsiyonel bir değer
- Her üyede farklı bir literal değer Doğru cevap
- Her üyede aynı değer
Açıklama: Discriminant alan her üyede farklı bir literal değer alır; bu sayede TypeScript bir eşitlik kontrolüyle union'ı tek üyeye daraltabilir.
2 Literal discriminant ile daraltma
type Event =
| { type: "click"; x: number; y: number }
| { type: "scroll"; offset: number };
function handle(e: Event) {
if (e.type === ____) {
return e.x + e.y;
}
return e.offset;
}type Event =
| { type: "click"; x: number; y: number }
| { type: "scroll"; offset: number };
function handle(e: Event) {
if (e.type === "click") {
return e.x + e.y;
}
return e.offset;
}Açıklama: Discriminant literal "click" ile kontrol union'ı click üyesine daraltır; koşul içinde e.x ve e.y güvenle kullanılır.
3 Literal discriminant parçaları
| Kavram | Anlamı |
|---|---|
Literal değer |
her üyede benzersiz |
e.type === "click" |
click üyesine daraltır |
Discriminant alan |
literal türünde |
Eşitlik kontrolü |
daraltma yöntemi |