Technical Tutorials

Orta seviye TypeScript geliştiricileri için temel sözdiziminden sağlam mimari kalıplara geçiş süreci, genellikle gelişmiş tür manipülasyonunun öğrenme eğrisiyle karşılaştığında bir duvara çarpar. string, number ve interface temel oluştururken, TypeScript'in gerçek gücü tür sistemi aracılığıyla karmaşık mantığı ifade etme yeteneğinde yatar. Gelişmiş türlerden yararlanarak, aksi takdirde üretime sızacak hataları derleme zamanında yakalayabilir, tekrarlayan kodları (boilerplate) azaltabilir ve kendisini açıklayan API'ler oluşturabilirsiniz.

Bu yazıda, TypeScript'teki en kritik gelişmiş türler olan Birleşimler (Unions), Kesişimler (Intersections), Ayırt Edici Birleşimler (Discriminated Unions), Tür Koruyucular (Type Guards) ve Koşullu Türler (Conditional Types) ele alınmakta; kod kalitenizi yükseltmenize yardımcı olmak için her biri için pratik örnekler sunulmaktadır.

Birleşim ve Kesişim Türlerinin Gücü

Birleşim türleri, bir değişkenin birden fazla türü alabilmesini sağlar ve bu durum boru işareti | kullanılarak bildirilir. Buna karşılık, kesişim türleri birden fazla türü tek bir türde birleştirmek için ampersand & işaretini kullanır. Basit görünmelerine rağmen, davranışlarını anlamak dinamik veri yapılarını yönetmek için hayati önem taşır.

Bir kullanıcının profilinin, önbellekten yüklenirken ya standart bir nesne ya da basitleştirilmiş bir dize (string) ID olabileceği bir senaryoyu ele alalım:

// Birleşim Türü: User nesnesi VEYA bir dize ID'sini kabul eder
type UserId = User | string;

function greetUser(input: UserId) {
  if (typeof input === 'string') {
    console.log(`Merhaba kullanıcı ${input}`);
  } else {
    console.log(`Merhaba ${input.name}`);
  }
}

// Kesişim Türü: Özellikleri birleştirir
interface Admin {
  permissions: string[];
}

interface User {
  name: string;
}

type SuperUser = Admin & User;
// SuperUser artık hem 'permissions' hem de 'name' gerektirir

Ayırt Edici Birleşimler ve Tür Koruyucular

Gelişmiş türlerin en pratik uygulamalarından biri Ayırt Edici Birleşim (veya Etiketli Birleşim) desenidir. Bu desen, her üyesinin ayırt edici (discriminant) olarak bilinen, sabit bir türe sahip ortak bir özelliği olan bir birleşim türü içerir. Bu sayede TypeScript, kontrol akışı blokları içinde türü daraltabilir.

Farklı türdeki ağ isteklerini işleyen bir sistemi hayal edin:

type NetworkSuccess = { status: number; response: string };
type NetworkFail = { status: number; reason: string };
type NetworkEvent = NetworkSuccess | NetworkFail;

function handleNetworkEvent(event: NetworkEvent) {
  // TypeScript, 'status' özelliğine göre türü daraltır
  if (event.status === 200) {
    // Burada, event türü NetworkSuccess olarak daraltılmıştır
    console.log(`Başarılı: ${event.response}`);
  } else {
    // Burada, event türü NetworkFail olarak daraltılmıştır
    console.log(`Başarısız, nedeni: ${event.reason}`);
  }
}

Bu desen, Redux gibi durum yönetimi kütüphanelerinde hayati önem taşır; burada işlemlere bağlı olarak farklı yük (payload) yapıları taşıyan aksiyonlar sıkça görülür.

Dinamik Mantık İçin Koşullu Türler

Koşullu türler, homojen olmayan tür eşlemelerini ifade etmenizi sağlar. T extends U ? X : Y sözdizimini takip eder; bu, "T, U'ya atanabiliyorsa X türünü kullan, aksi halde Y türünü kullan" anlamına gelir. Bu özellik, yardımcı türler oluşturmak veya veri yapılarını dinamik olarak dönüştürmek için son derece faydalıdır.

Bir fonksiyonun dönüş türünü çıkaran bir koşullu tür oluşturalım:

// Koşullu türü tanımlayın
type GetReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

// Kullanım
type MyFunc = () => Promise<string>;
type Result = GetReturnType<MyFunc>; 
// Result artık şu şekilde çıkarılmıştır: Promise<string>

// Bu, işlevsel olmayan bir tür geçirilirse hataları önler
// type BadResult = GetReturnType<number>; // 'never' sonucunu verir

Bu yaklaşım, TypeScript'in yerleşik yardımcı türleri olan ReturnType<T> ve Pick<T, K> gibi yapılarında yoğunlukla kullanılır. Kendi koşullu türlerinizi nasıl yazacağınızı anlamak, son derece yeniden kullanılabilir ve genel (generic) bileşenler oluşturmanıza olanak tanır.

Şablon Sabit Türleri

TypeScript 4.1 ile tanıtılan şablon sabit türleri, diğer türlere dayalı olarak dize türleri oluşturmanıza olanak tanır. Bu özellik, özellikle stil sistemleri veya API URL oluşturma için kullanışlıdır.

type EventName = 'click' | 'hover' | 'submit';

// Önekli bir dize türü oluşturun
type OnEvent = `on${Capitalize<EventName>}`;
// Sonuç: 'onClick' | 'onHover' | 'onSubmit'

Sonuç

Gelişmiş TypeScript türlerinde ustalaşmak, sizi yalnızca sözdizimi denetimi için TypeScript kullanan bir geliştiriciden, onu mimari tasarım için kullanan bir geliştiriciye dönüştürür. Birleşimleri, kesişimleri, ayırt edici birleşimleri ve koşullu türleri kullanarak, yalnızca daha güvenli değil, aynı zamanda daha ifade gücü yüksek ve sürdürülebilir kod yazabilirsiniz. İlk öğrenme eğrisi dik olsa da, azalan çalışma zamanı hataları ve geliştirici deneyimindeki iyileşmelerin uzun vadeli faydaları tartışmasızdır. Tür sisteminin, mantığınızın sizin için çalıştığı kadar sizin için çalıştığını görmek için bu kalıpları bir sonraki projenize dahil etmeye başlayın.