TypeScript Academy · Ders

Ayrıştırılmış Birleşimler Oluşturma

Birleşim üyelerini ortak bir ayırt edici özellikle etiketleyin.

1. ders / 413 adım

Ayrıştırılmış Birleşimler Oluşturma, 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.

Ayırt Edici Birleşim Nedir?

Ayırt edici birleşim, tümü ayırt edici adı verilen ortak bir literal özelliği paylaşan nesne türlerinin birleşimidir. Bu ortak etiket, TypeScript'in üyeleri birbirinden ayırmasını sağlar.

// The shared "kind" property is the discriminant
type Circle = { kind: "circle"; radius: number };
type Square = { kind: "square"; side: number };
type Shape = Circle | Square;

Ayırt Edici Özellik

Ayırt edici, string gibi geniş bir tür değil, "circle" gibi bir sabit türü olmalıdır. Her üye kendine özgü bir sabit değer alır.

type Circle = { kind: "circle"; radius: number };
type Square = { kind: "square"; side: number };

const c: Circle = { kind: "circle", radius: 10 };
console.log(c.kind); // "circle"

Her Üyenin Kendine Özgü Alanları Vardır

Paylaşılan ayırt edicinin yanı sıra her üye, yalnızca kendisi için anlamlı olan alanları taşır. Bir dairenin radius alanı, bir karenin ise side alanı vardır.

type Circle = { kind: "circle"; radius: number };
type Square = { kind: "square"; side: number };
type Rectangle = { kind: "rectangle"; width: number; height: number };
type Shape = Circle | Square | Rectangle;

Birleşim Değerleri Oluşturma

Bir değer oluşturduğunuzda TypeScript, yapının kind değerine göre birleşimin tam olarak bir üyesiyle eşleştiğini denetler.

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

const shapes: Shape[] = [
  { kind: "circle", radius: 5 },
  { kind: "square", side: 4 }
];
console.log(shapes.length); // 2

Neden Yalnızca İsteğe Bağlı Alanlar Kullanılmamalı?

İsteğe bağlı alanları olan gevşek bir tür (radius?, side?) geçersiz birleşimlere izin verir. Ayırt edici birleşim, geçersiz durumların temsil edilememesini sağlar.

// Loose and error-prone: nothing stops radius + side together
type BadShape = { radius?: number; side?: number };
const bad: BadShape = { radius: 5, side: 4 }; // nonsense, but allowed

Ayırt Edicinin Adı Size Bağlıdır

Etiket geleneksel olarak kind veya type olarak adlandırılır; ancak her üye farklı bir sabit değerle aynı özellik adını kullandığı sürece herhangi bir ad kullanılabilir.

type Event =
  | { type: "click"; x: number; y: number }
  | { type: "scroll"; delta: number };

const e: Event = { type: "click", x: 10, y: 20 };
console.log(e.type); // "click"

Şekil Alanı Hesaplayıcısını Modelleştirme

Ayırt edici birleşimler, her çeşidin farklı biçimde işlenmesi gerektiğinde çok kullanışlıdır. Burada, bir alan işlevinin daha sonra işleyeceği şekilleri hazırlıyoruz.

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

const myShapes: Shape[] = [
  { kind: "circle", radius: 3 },
  { kind: "square", side: 6 }
];
console.log("Count:", myShapes.length);

Üçüncü Bir Çeşit Ekleme

Birleşimler genişletilmeye açıktır. Bir triangle üyesi eklemek tek satırlık bir değişikliktir ve TypeScript, birleşimin kullanıldığı her yerde bu üyeyi izler.

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

const t: Shape = { kind: "triangle", base: 4, height: 8 };
console.log(t.kind);

Benzersiz Sabitler Çakışmayı Önler

Her kind değeri benzersiz olduğu için belirsizlik yoktur. Bir değer tam olarak tek bir üyedir; aynı anda iki üye olamaz.

type A = { kind: "a"; value: number };
type B = { kind: "b"; label: string };
type Union = A | B;

function describe(u: Union) {
  return u.kind === "a" ? u.value : u.label;
}
console.log(describe({ kind: "b", label: "hi" }));

Boole Etiketli Ayırt Ediciler

Ayırt edicinin dize olması gerekmez. Başarı ve başarısızlık sonuçları için kullanışlı olan bir boolean sabiti de işe yarar.

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

const r: Result = { ok: true, data: "loaded" };
console.log(r.ok ? r.data : r.error);

Uygulamada Ayırt Edici Birleşimler

Artık eksiksiz bir şekil modeliniz var. Bir sonraki derste, her üyenin kendine özgü alanlarına güvenli biçimde erişmek için ayırt edici üzerinden daraltma yapacağız.

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

const sample: Shape = { kind: "circle", radius: 7 };
console.log(sample.kind, "ready");

Hızlı Kontrol: Ayırt Ediciler

Ayırt edici birleşimler konusundaki anlayışınızı sınayın.

İnteraktif derste cevapla

Özet: Ayırt Edici Birleşimler Oluşturma

Ayırt edici birleşimin, kind gibi bir sabit ayırt ediciyi paylaşan nesne türlerini bir araya getirdiğini öğrendiniz. Her üye kendi alanlarını taşır, benzersiz sabitler çakışmayı önler ve bu desen geçersiz durumların temsil edilememesini sağlar.

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

const done: Shape = { kind: "square", side: 2 };
console.log("Recap complete:", done.kind);

Başlamak ücretsiz

Yapay zeka eğitmeniyle TypeScript öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 101
Dersler: 352

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Ayrıştırılmış Birleşimler Oluşturma” dersi ücretsiz mi?

Evet — “Ayrıştırılmış Birleşimler Oluşturma” 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.

“Ayrıştırılmış Birleşimler Oluşturma” dersinde ne öğreneceğim?

Birleşim üyelerini ortak bir ayırt edici özellikle etiketleyin. 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.

“Ayrıştırılmış Birleşimler Oluşturma” 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