Bölüm 5: Union, Intersection ve Literal Types

TypeScript’in belki de en güçlü, en “gerçek dünya” odaklı konularından biri olan Union Types, Intersection Types ve Literal Types konularına geldik.

Bu konular, özellikle React component varyasyonlarında, durum yönetiminde, API veri modellemelerinde ve form yapılarında çok sık kullanılır. Şimdi bu bölümü tamamen açıklamalı, öğretici ve örnekli bir şekilde işleyelim.

Bu bölümde neler öğreneceğiz?

• Union Type (|) nedir, nasıl kullanılır?
• Intersection Type (&) nedir, ne zaman gerekir?
• Literal Type nedir, neden çok işlevseldir?
• Discriminated Union: tip güvenli durum kontrolü nasıl kurulur?
• Tüm yapılar nasıl React veya API modellerinde uygulanır?

5.1 Union Type (|)

Tanım: Union type bir değişkenin birden fazla farklı tipten birini alabileceğini belirtir.

1
let value: string | number;
2

3
value = "Merhaba"; // ✅
4
value = 42;        // ✅
5
value = true;      // ❌ TS Error

Gerçek Kullanım:: Kullanıcıdan gelen bir input değeri olabilir:

1
function formatInput(input: string | number): string {
2
  return input.toString().toUpperCase();
3
}

❗ Yukarıdaki kod hata verir çünkü number.toUpperCase() yoktur.

✅ Doğrusu:

1
function formatInput(input: string | number): string {
2
  if (typeof input === "string") {
3
    return input.toUpperCase();
4
  }
5
  return input.toString();
6
}

✅ Type Guard kullanmadan union type'lar doğrudan kullanılamaz. TypeScript emin olmak ister.

5.2 Intersection Type (&)

Tanım: Intersection type, birden fazla tipin birleştirilmesi ile oluşur. Tüm alanlara birlikte sahip olmalıdır.

1
type Name = { name: string };
2
type Age = { age: number };
3

4
type Person = Name & Age;
5

6
const person: Person = {
7
  name: "Yasin",
8
  age: 26,
9
};

Nerede kullanılır?

• API modellerini birleştirmek için
• props ve style gibi iki farklı veri kaynağını birleştirmek için
• React’te props: ComponentProps & StyleProps gibi kullanım

5.3 Literal Types

Tanım: Literal type, değeri sabitlenmiş tiplerdir.

1
type Direction = "up" | "down" | "left" | "right";
2

3
let move: Direction;
4

5
move = "up";     // ✅
6
move = "down";   // ✅
7
move = "back";   // ❌ TS Error

Gerçek Kullanım:

1
type ButtonVariant = "primary" | "secondary" | "danger";
2

3
function renderButton(variant: ButtonVariant) {
4
  return `<button class="${variant}">${variant}</button>`;
5
}

✅ Kod daha okunaklı, hatasız ve otokompletesi güçlü olur.

5.4 Discriminated Union – Duruma Göre Tip Seçimi

Tanım: Aynı yapıya sahip ama farklı davranışlar içeren tipleri, ortak bir discriminator alanı ile ayırarak tip güvenli kontrol yapılmasını sağlar.

Örnek: API veri durumu

1
type Loading = { status: "loading" };
2
type Success = { status: "success"; data: string };
3
type Error = { status: "error"; errorMessage: string };
4

5
type ApiState = Loading | Success | Error;

Kullanım:

1
function renderState(state: ApiState) {
2
  switch (state.status) {
3
    case "loading":
4
      return "Yükleniyor...";
5
    case "success":
6
      return `Veri: ${state.data}`;
7
    case "error":
8
      return `Hata: ${state.errorMessage}`;
9
  }
10
}

✅ TypeScript burada status alanına göre hangi objenin geldiğini otomatik olarak anlar ve uygun alanlara erişime izin verir.

5.5 Union & Literal Types ile Form Alanı Kontrolü

1
type FieldType = "text" | "number" | "checkbox";
2

3
type FormField = {
4
  name: string;
5
  type: FieldType;
6
};
7

8
const field: FormField = {
9
  name: "Kullanıcı Adı",
10
  type: "text"
11
};

❌ type: "dropdown" verirsen anında hata alırsın. Çünkü "dropdown" FieldType içinde yok.

5.6 Union ve Intersection Ne Zaman Kullanılır?

Gerçek Uygulama: Buton Bileşeni Varyasyonu

1
type Variant = "primary" | "secondary" | "danger";
2

3
type ButtonProps = {
4
  text: string;
5
  variant: Variant;
6
};

1
function Button({ text, variant }: ButtonProps) {
2
  const classMap: Record<Variant, string> = {
3
    primary: "bg-blue-500 text-white",
4
    secondary: "bg-gray-200 text-black",
5
    danger: "bg-red-500 text-white",
6
  };
7

8
  return <button className={classMap[variant]}>{text}</button>;
9
}

Alıştırmalar

• Status = "idle" | "loading" | "error" | "success" union’ı tanımla, bir fonksiyon yaz ve switch-case ile her durumu işle.
• type Admin = { role: "admin"; privileges: string[] } ve type User = { role: "user"; group: string } union yapısıyla birleşmiş Person tipi oluştur.
• type Theme = "light" | "dark" | "system" ile çalışan bir fonksiyon yaz.

Bölüm Özeti

Bu Bölümle Artık:

• Bir değişkenin alabileceği değerleri sınırlayabiliyorsun.
• Tip güvenli switch-case yapıları kurabiliyorsun.
• React bileşenlerini varyasyonlarla genişletebiliyorsun.
• API, form ve state yapılarında çok daha sağlam veri modelleri oluşturabiliyorsun.