TypeScript Academy · Ders

Ayırt Edici Üzerinden Daraltma

TypeScript'in switch ifadelerinde varyantları daraltmasını sağlayın.

Ayırt Edici Üzerinden Daraltma, 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.

Ayırt Edici Üzerinden Daraltma

Ayırt ediciyi denetlediğinizde TypeScript, birleşimi eşleşen üyeye daraltır ve o üyeye özgü alanları kullanılabilir hâle getirir. Bu desenin asıl yararı budur.

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; side: number };

function area(s: Shape) {
  if (s.kind === "circle") return Math.PI * s.radius ** 2;
  return s.side ** 2;
}
console.log(area({ kind: "circle", radius: 2 }).toFixed(2));

Ayırt Edici Üzerinde Switch Kullanma

Her çeşidi ele almanın en temiz yolu, ayırt edici üzerinde bir switch kullanmaktır. Her case içinde tür otomatik olarak daraltılır.

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; side: number };

function area(s: Shape): number {
  switch (s.kind) {
    case "circle": return Math.PI * s.radius ** 2;
    case "square": return s.side ** 2;
  }
}
console.log(area({ kind: "square", side: 5 }));

Her Case İçin Üyeye Özel Alanlar

"circle" durumunda s.radius kullanılabilir, ancak s.side kullanılamaz. TypeScript, tam olarak hangi üye içinde olduğunuzu bilir.

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; side: number };

function describe(s: Shape) {
  switch (s.kind) {
    case "circle": return "r=" + s.radius;
    case "square": return "side=" + s.side;
  }
}
console.log(describe({ kind: "circle", radius: 9 }));

If Kullanarak Daraltma

Bir switch kullanmanız gerekmez. Ayırt ediciyi karşılaştıran basit bir if de aynı ölçüde etkili biçimde daraltma yapar.

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; side: number };

function perimeter(s: Shape): number {
  if (s.kind === "circle") {
    return 2 * Math.PI * s.radius;
  }
  return 4 * s.side;
}
console.log(perimeter({ kind: "square", side: 3 }));

Yanlış Alana Erişim Başarısız Olur

Daraltma yapmadan önce üyeye özgü bir alana erişemezsiniz. Özellik her üyede bulunmadığı için TypeScript bir hata bildirir.

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; side: number };

function broken(s: Shape) {
  // Error: radius does not exist on Square
  // return s.radius;
  return s.kind;
}
console.log(broken({ kind: "square", side: 1 }));

Boole Ayırt Edicileriyle Daraltma

{ ok: true } | { ok: false } birleşiminde if (r.ok) denetimi, türü başarı üyesine daraltır.

type Result =
  | { ok: true; data: string }
  | { ok: false; error: string };

function handle(r: Result): string {
  if (r.ok) return "Data: " + r.data;
  return "Error: " + r.error;
}
console.log(handle({ ok: false, error: "boom" }));

Erken Dönüşle Daraltma

Bir çeşitte erken dönüş yapmak, kalan kodu diğer çeşitlere daraltır. Bu, durumları teker teker ayıklamanın temiz bir yoludur.

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; side: number };

function label(s: Shape): string {
  if (s.kind === "circle") return "circle";
  // s is now narrowed to Square here
  return "square with side " + s.side;
}
console.log(label({ kind: "square", side: 8 }));

Diğer Koşullarla Birleştirme

Ayırt edici denetimini başka mantıklarla birleştirebilirsiniz. TypeScript, o dalda ayırt edici koşulu doğru kaldığı sürece daraltmayı korur.

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; side: number };

function bigCircle(s: Shape): boolean {
  return s.kind === "circle" && s.radius > 100;
}
console.log(bigCircle({ kind: "circle", radius: 150 }));

Dizi Filtrelerinde Daraltma

Daraltma geri çağırma işlevlerinin içinde de çalışır. Burada, dizi üzerinde dolaşırken her şekil ayrı ayrı denetlenir.

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; side: number };

const shapes: Shape[] = [
  { kind: "circle", radius: 1 },
  { kind: "square", side: 2 }
];
shapes.forEach(s => {
  if (s.kind === "circle") console.log("c", s.radius);
  else console.log("s", s.side);
});

Switch Dönüşleri Tür Güvenliğini Korur

Bir switch tüm durumları ele alıp değer döndürdüğünde TypeScript, tüm durum sonuçlarının birleşiminden kesin bir dönüş türü çıkarır.

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; side: number };

function tag(s: Shape) {
  switch (s.kind) {
    case "circle": return s.radius;
    case "square": return s.side;
  }
}
console.log(tag({ kind: "circle", radius: 4 }));

Daraltmayı Bir Araya Getirme

İster switch ister if kullanın, üyelerin alanlarına güvenli biçimde erişmenizi sağlayan şey ayırt ediciyi denetlemektir. Sırada her durumun ele alındığını garanti etmek var.

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; side: number };

function area(s: Shape): number {
  return s.kind === "circle" ? Math.PI * s.radius ** 2 : s.side ** 2;
}
console.log(Math.round(area({ kind: "circle", radius: 10 })));

Hızlı Kontrol: Daraltma

Ayırt edici üzerinden daraltma konusundaki anlayışınızı sınayın.

Özet: Ayırt Edici Üzerinden Daraltma

Ayırt ediciyi switch veya if ile denetlemenin birleşimi tek bir üyeye daralttığını ve yalnızca o üyeye ait alanları kullanılabilir hâle getirdiğini gördünüz. Erken dönüşler ve birleştirilmiş koşullar da daraltmayı korur.

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; side: number };

const s: Shape = { kind: "square", side: 7 };
console.log(s.kind === "square" ? s.side : 0);

Sıkça Sorulan Sorular

“Ayırt Edici Üzerinden Daraltma” dersi ücretsiz mi?

Evet — “Ayırt Edici Üzerinden Daraltma” 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.

“Ayırt Edici Üzerinden Daraltma” dersinde ne öğreneceğim?

TypeScript'in switch ifadelerinde varyantları daraltmasını sağlayı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.

“Ayırt Edici Üzerinden Daraltma” 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

← TypeScript Academy Sayfasına Dön