TypeScript İleri Seviye Tipler: Utility Types, Mapped Types ve Conditional Types Rehberi

TypeScript İleri Seviye Tipler: Utility Types, Mapped Types ve Conditional Types Rehberi

CodeMareFi'ye Hoş Geldiniz!Yazılım dünyasındaki en güncel ve işlevsel kodları sizlerle paylaşmaya devam ediyoruz. Bu makalemizde, projelerinizde zaman kazanmanızı sağlayacak ve sisteminizi bir üst seviyeye taşıyacak önemli bir konuyu detaylıca ele alacağız. Hazırladığımız bu rehber, hem yeni başlayanlar hem de profesyonel geliştiriciler için özenle derlenmiştir. Aşağıdaki adımları ve kod bloklarını dikkatlice uygulayarak projenize sorunsuz bir entegrasyon sağlayabilirsiniz. Hazırsanız, detaylara geçelim.

TypeScript'in Gücü: Tip Sistemi

TypeScript'e yeni başlayanlar genellikle temel tipleri (string, number, boolean) öğrendikten sonra "TypeScript'i öğrendim" der. Oysa gerçek güç, TypeScript'in tip programlama (type-level programming) yeteneklerinde gizlidir.

1. Utility Types (Hazır Tip Yardımcıları)

TypeScript, sizi tekrarlayan tip tanımlamalarından kurtaran bir dizi hazır yardımcı tip (utility type) ile gelir:

interface Kullanici {
  id: number;
  ad: string;
  email: string;
  sifre: string;
  olusturmaTarihi: Date;
}

// Partial: Tüm alanları opsiyonel yapar (güncelleme formları için ideal)
type KullaniciGuncelle = Partial;
// { id?: number; ad?: string; email?: string; ... }

// Required: Tüm alanları zorunlu yapar
type KullaniciTamDolu = Required;

// Pick: Sadece istediğin alanları seç
type KullaniciOnizleme = Pick;
// { id: number; ad: string; email: string }

// Omit: Belirli alanları dışarıda bırak
type KullaniciHerkese = Omit;
// Şifre alanı olmadan tüm kullanıcı bilgileri

// Readonly: Tüm alanları salt okunur yap (immutability için)
type KullaniciSabitler = Readonly;

2. Mapped Types (Eşleştirilmiş Tipler)

Mevcut bir tipin üzerinden geçerek yeni bir tip üretebilirsiniz:

// Her bir alanı opsiyonel ve nullable yapan custom mapped type
type NullablePartial = {
  [K in keyof T]?: T[K] | null;
};

type KullaniciNullable = NullablePartial;
// { id?: number | null; ad?: string | null; ... }

// Her alanın değer tipini string'e dönüştüren mapped type
type Stringify = {
  [K in keyof T]: string;
};

// API yanıtlarını JSON string olarak temsil etmek için kullanışlı
type KullaniciJSON = Stringify;

3. Conditional Types (Koşullu Tipler)

En güçlü TypeScript özelliklerinden biri, tiplerin diğer tiplere göre şekillenebilmesidir:

// Temel conditional type
type IsString = T extends string ? 'evet' : 'hayır';

type Test1 = IsString;   // 'evet'
type Test2 = IsString;   // 'hayır'

// Pratik örnek: Promise'i çöz
type Awaited = T extends Promise ? R : T;

type Sonuc1 = Awaited>;  // string
type Sonuc2 = Awaited;           // number

// Dizi ise eleman tipini döndür, değilse T'yi döndür
type Unarray = T extends Array ? Item : T;

type Tip1 = Unarray;   // string
type Tip2 = Unarray;     // number

4. Template Literal Types

type Renk = 'kirmizi' | 'mavi' | 'yesil';
type Boyut = 'kucuk' | 'orta' | 'buyuk';

// Karteziyen çarpım: tüm kombinasyonları üret
type Kombinasyonlar = `${Boyut}-${Renk}`;
// 'kucuk-kirmizi' | 'kucuk-mavi' | 'kucuk-yesil' | 'orta-kirmizi' | ...

// Event handler isimlerini tip güvenli hale getirme
type EventIsmi = 'tikla' | 'yukleme' | 'hata';
type Handler = `on${Capitalize}`;
// 'onTikla' | 'onYukleme' | 'onHata'
🚀 Ne Zaman Kullanmalı?

Bu tip özellikler özellikle kütüphane yazarken, genel API'lar tasarlarken ve büyük ekiplerde tip güvenliğini maksimize etmek istediğinizde çok değer katar. Küçük projelerde aşırı kullanmak kodu okunaksız hale getirebilir.

Sonuç ve Değerlendirme

Bu makalemizde paylaştığımız kodlar ve teknik bilgiler, sisteminizin performansını artıracak ve sizlere daha esnek bir geliştirme imkanı sunacaktır. CodeMareFi üzerinden paylaştığımız tüm içerikler, güncel yazılım standartlarına uygun olarak optimize edilmiş olup, projelerinizde güvenle kullanabileceğiniz şekilde hazırlanmıştır.

Eğer kurulum sırasında herhangi bir sorunla karşılaşırsanız, kod çalışmazsa veya sisteme ekstra özellikler eklemek isterseniz, iletişim kanallarımızdan ya da Discord sunucumuza katılarak diğer geliştirici arkadaşlarımızdan anında destek alabilirsiniz. Daha fazla ücretsiz kod paylaşımı, web tasarım rehberleri ve teknoloji makaleleri için sitemizi takipte kalmayı unutmayın. İyi kodlamalar!

0 Yorum

YORUM YAPMAK İÇİN SİSTEME SIZMANIZ GEREKİYOR

Lütfen yukarıdaki butonu kullanarak giriş yapın veya kimlik oluşturun.

Yorumlar yükleniyor...