TypeScript’te Generics Kullanımı: Derinlemesine Bir Rehber

TypeScript’te Generics Kullanımı: Derinlemesine Bir Rehber

Giriş

Modern web uygulamaları geliştirirken, kodun okunabilirliği, bakımı ve özellikle de güvenilirliği büyük önem taşır. JavaScript’in dinamik yapısı, esneklik sağlarken, büyük ölçekli projelerde tip hatalarına ve beklenmedik davranışlara yol açabilir. İşte bu noktada TypeScript devreye girer. TypeScript, JavaScript’e statik tipleme yeteneği kazandırarak, geliştiricilerin kodlarını daha güvenli ve öngörülebilir hale getirmelerini sağlar. Derleme zamanında tip kontrolü yaparak olası hataları çalışma zamanından önce tespit etmemize olanak tanır.

TypeScript’in sunduğu en güçlü özelliklerden biri de “Generics”tir. Generics, bileşenleri (fonksiyonlar, sınıflar, arayüzler) belirli bir veri tipiyle değil, genel bir veri tipiyle çalışacak şekilde tasarlamamızı sağlar. Bu sayede, aynı kodu farklı veri tipleriyle tekrar tekrar kullanabiliriz, ancak bunu yaparken tip güvenliğini kaybetmeyiz. Generics, kod tekrarını azaltır, kodun daha esnek olmasını sağlar ve geliştiricilere güçlü, tip güvenli ve yeniden kullanılabilir bileşenler oluşturma yeteneği sunar. Bu makalede, TypeScript Generics’in ne olduğunu, neden bu kadar önemli olduğunu, farklı kullanım alanlarını ve ileri seviye senaryolarını detaylı bir şekilde inceleyeceğiz. Amacımız, Generics’i derinlemesine anlayarak TypeScript projelerinizde etkin bir şekilde kullanabilmeniz için size kapsamlı bir rehber sunmaktır.

Generics Nedir? Neden İhtiyaç Duyarız?

Generics’in ne olduğunu anlamak için, öncelikle onun çözdüğü problemi kavramak önemlidir. Tip güvenliğini korurken esnek kod yazma ihtiyacı, Generics’in ortaya çıkış nedenidir.

Sorun: Tekrar Eden Kodlar ve Tip Güvenliği Eksikliği

Bir fonksiyonun aldığı değeri olduğu gibi geri döndüren basit bir “identity” (özdeşlik) fonksiyonu düşünelim. Bu fonksiyonu farklı tiplerle çalıştırmak istediğimizde ne olur?

İlk akla gelen yöntemlerden biri, JavaScript’te olduğu gibi hiçbir tip belirtmemek veya TypeScript’in any tipini kullanmaktır:

function identityAny(arg: any): any {
  return arg;
}

let output1 = identityAny("myString"); // output1 tipi: any
let output2 = identityAny(123);      // output2 tipi: any

console.log(output1.length); // Çalışır
console.log(output2.length); // Çalışma zamanı hatası: undefined (number'ın length özelliği yok)

Bu örnekte identityAny fonksiyonu, herhangi bir tipteki değeri kabul edip geri döndürebilir. Ancak any tipi kullanmak, TypeScript’in tip kontrol mekanizmasını devre dışı bırakır. Fonksiyona verilen 123 bir sayı olmasına rağmen, TypeScript output2‘nin tipini any olarak belirlediği için, output2.length ifadesine derleme zamanında itiraz etmez. Bu, çalışma zamanında beklenmedik hatalara yol açabilir. any tipi, tip güvenliğini tamamen ortadan kaldırır ve TypeScript kullanmanın temel faydalarından birini kaybetmemize neden olur.

Peki ya her tip için ayrı bir fonksiyon yazsaydık?

function identityString(arg: string): string {
  return arg;
}

function identityNumber(arg: number): number {
  return arg;
}

// ... ve diğer tüm tipler için

Bu yaklaşım, kod tekrarına yol açar ve ölçeklenebilir değildir. Her yeni tip için yeni bir fonksiyon yazmak zorunda kalırız. Bu, karmaşık projelerde sürdürülebilir bir çözüm değildir.

Çözüm: Generics

İşte burada Generics devreye girer. Generics, bir bileşeni (fonksiyon, sınıf veya arayüz) belirli bir tip üzerinde değil, bir “tip değişkeni” üzerinde çalışacak şekilde tasarlamamızı sağlar. Bu tip değişkeni, bileşen çağrılırken gerçek bir tiple değiştirilir. Bu sayede, aynı kodu farklı tiplerle kullanabiliriz ve en önemlisi, tip güvenliğini koruruz.

Generics kullanılarak yazılmış bir identity fonksiyonu şöyle görünür:

function identity(arg: T): T {
  return arg;
}

// Fonksiyonu çağırırken tip otomatik olarak çıkarılır:
let outputString = identity("myString"); // outputString tipi: string
let outputNumber = identity(123);      // outputNumber tipi: number

console.log(outputString.length); // Çalışır, TypeScript bilir ki outputString bir string'dir.
// console.log(outputNumber.length); // Hata: 'number' tipinde 'length' özelliği yok.
                                   // TypeScript derleme zamanında bu hatayı yakalar.

// İsteğe bağlı olarak tipi açıkça belirtebiliriz:
let outputBoolean = identity(true); // outputBoolean tipi: boolean

Bu örnekte:
* ifadesi, T adında bir tip değişkeni tanımlar. T, “Type” kelimesinden gelir ve yaygın olarak kullanılan bir isimlendirme kuralıdır, ancak herhangi bir geçerli tanımlayıcı kullanabilirsiniz (örneğin , , ).
* arg: T parametrenin tipinin T olduğunu belirtir.
* : T fonksiyonun dönüş tipinin de T olduğunu belirtir.

Bu sayede, identity fonksiyonunu çağırırken, TypeScript T tip değişkenini verdiğimiz argümanın gerçek tipiyle değiştirir. identity("myString") çağrıldığında, T string olur. identity(123) çağrıldığında, T number olur. Fonksiyonun içindeki işlemler bu gerçek tipler üzerinden tip kontrolüne tabi tutulur. Bu da bize hem esneklik hem de güçlü tip güvenliği sağlar.

Generics’in temel faydaları şunlardır:
1. Tip Güvenliği (Type Safety): any kullanmadan, farklı tiplerle çalışırken bile derleme zamanında tip hatalarını yakalamayı sağlar.
2. Kod Tekrarını Azaltma (Reduced Code Duplication): Aynı mantığı farklı tipler için tekrar tekrar yazmak yerine, generic bir bileşen oluşturulabilir.
3. Esneklik ve Yeniden Kullanılabilirlik (Flexibility and Reusability): Bileşenlerinizi daha genel hale getirerek, daha geniş bir yelpazedeki senaryolarda kullanılabilir olmasını sağlar.
4. Geliştirici Deneyimi (Developer Experience): Otomatik tamamlama (autocompletion) ve tip çıkarımı sayesinde daha iyi bir geliştirme deneyimi sunar.

Generics Kullanım Alanları

Generics, TypeScript’in birçok farklı yerinde kullanılabilir: fonksiyonlarda, arayüzlerde, tip alias’larında ve sınıflarda. Her bir kullanım alanını detaylıca inceleyelim.

Fonksiyonlarda Generics

Fonksiyonlarda Generics kullanımı, belki de en yaygın ve anlaşılması kolay senaryodur. Daha önce gördüğümüz identity fonksiyonu bunun güzel bir örneğidir.

// Basit bir generic fonksiyon
function identity(arg: T): T {
  return arg;
}

let result1 = identity("Merhaba Dünya"); // T = string
let result2 = identity(42);           // T = number
let result3 = identity(true);                 // T = boolean (tip çıkarımı ile)

console.log(result1.toUpperCase()); // "MERHABA DÜNYA"
// console.log(result2.toFixed(2));   // "42.00"

Birden Fazla Generic Tip Değişkeni

Bir fonksiyon birden fazla generic tip değişkeni de alabilir:

function merge(obj1: T, obj2: U): T & U {
  return { ...obj1, ...obj2 };
}

let mergedObject = merge({ name: "Alice" }, { age: 30 });
// mergedObject'in tipi: { name: string; } & { age: number; } yani { name: string; age: number; }

console.log(mergedObject.name); // Alice
console.log(mergedObject.age);  // 30

Burada T ve U iki farklı generic tipi temsil eder. Fonksiyonun dönüş tipi T & U (intersection type), iki objenin özelliklerini birleştiren yeni bir tip oluşturur.

Generic Tiplerle Çalışırken Kısıtlamalar (Constraints)

Bazen generic tiplerle çalışırken, bu tiplerin belirli özelliklere sahip olmasını isteriz. Örneğin, bir fonksiyonun bir argümanın length özelliğine sahip olmasını beklediğini varsayalım. Eğer T tipinin herhangi bir şey olabileceğini varsayarsak, T.length ifadesi hata verebilir (örneğin, bir sayı tipinin length özelliği yoktur). Bu durumu extends anahtar kelimesi ile kısıtlayabiliriz.

interface Lengthwise {
  length: number;
}

function loggingIdentity(arg: T): T {
  console.log(arg.length); // Artık T'nin length özelliğine sahip olduğunu biliyoruz.
  return arg;
}

loggingIdentity("hello"); // length: 5
loggingIdentity([1, 2, 3]); // length: 3
// loggingIdentity(42); // Hata: 'number' tipinde 'length' özelliği yok.

Bu örnekte, T extends Lengthwise diyerek, T tipinin Lengthwise arayüzündeki tüm özelliklere (yani length özelliğine) sahip olması gerektiğini belirtiyoruz.

Başka bir yaygın kısıtlama senaryosu, bir objenin belirli bir özelliğine erişmek istediğimizde ortaya çıkar:

function getProperty(obj: T, key: K) {
  return obj[key];
}

let user = { id: 1, name: "Bob", email: "bob@example.com" };

let userName = getProperty(user, "name"); // userName tipi: string
let userId = getProperty(user, "id");     // userId tipi: number
// let userAddress = getProperty(user, "address"); // Hata: 'address' user tipinde yok.

Burada K extends keyof T ifadesi, K‘nın T tipinin bir anahtarı (property ismi) olması gerektiğini belirtir. Bu, obj[key] erişiminin tip güvenliğini sağlar.

Default Generic Tipler

TypeScript 2.3’ten itibaren, generic tiplere varsayılan değerler atayabiliriz. Bu, generic tipin belirtilmediği durumlarda bir yedek tip sağlar.

interface APIResponse { // T belirtilmezse default olarak any kullanılır.
  data: T;
  status: number;
  message?: string;
}

let response1: APIResponse = { data: "Success", status: 200 };
let response2: APIResponse = { data: { id: 1, name: "Item" }, status: 200 }; // T = any
let response3: APIResponse = { data: [10, 20, 30], status: 200 };

İnterface’lerde Generics

Arayüzler de generic olabilir ve bu, veri yapıları veya API yanıtları gibi genel yapılar tanımlamak için çok kullanışlıdır.

interface Box {
  value: T;
}

let stringBox: Box = { value: "Hello" };
let numberBox: Box = { value: 123 };

console.log(stringBox.value.length); // 5
// console.log(numberBox.value.toUpperCase()); // Hata: 'number' tipinde 'toUpperCase' yok.

interface KeyValuePair {
  key: K;
  value: V;
}

let userConfig: KeyValuePair = { key: "theme", value: 1 };
let productInfo: KeyValuePair = {
  key: 101,
  value: { name: "Laptop", price: 1200 }
};

Generic arayüzler, belirli bir veri yapısının içindeki elemanların tipini esnek bir şekilde tanımlamamızı sağlar. Örneğin, bir veri listesi veya bir API yanıtının veri yükü (payload) için çok kullanışlıdır.

Type Aliases’larda Generics

Arayüzlere benzer şekilde, tip alias’ları da generic olabilir.

type Pair = {
  first: T;
  second: U;
};

let myPair: Pair = { first: "age", second: 30 };
let anotherPair: Pair = { first: true, second: ["apple", "banana"] };

type CallbackFunction = (arg: T) => R;

const processString: CallbackFunction = (str) => str.length;
console.log(processString("TypeScript")); // 10

Generic type alias’lar, genellikle arayüzlerle benzer amaçlar için kullanılır, ancak fonksiyon tipleri veya union/intersection tipleri gibi daha karmaşık tip kombinasyonlarını tanımlamak için daha esnektirler.

Sınıflarda Generics

Sınıflar da generic olabilir. Bu, koleksiyonlar, veri yapıları veya fabrika desenleri gibi tipten bağımsız sınıflar oluşturmak için idealdir.

class GenericStack {
  private elements: T[] = [];

  push(element: T): void {
    this.elements.push(element);
  }

  pop(): T | undefined {
    return this.elements.pop();
  }

  isEmpty(): boolean {
    return this.elements.length === 0;
  }

  size(): number {
    return this.elements.length;
  }
}

let numberStack = new GenericStack();
numberStack.push(10);
numberStack.push(20);
console.log(numberStack.pop()); // 20 (tip: number)

let stringStack = new GenericStack();
stringStack.push("A");
stringStack.push("B");
console.log(stringStack.pop()); // "B" (tip: string)

Bir başka örnek, bir veri tabanı deposu (repository) sınıfı olabilir:

interface HasId {
  id: number;
}

class Repository {
  private items: T[] = [];

  add(item: T): void {
    this.items.push(item);
  }

  findById(id: number): T | undefined {
    return this.items.find(item => item.id === id);
  }

  getAll(): T[] {
    return [...this.items];
  }
}

interface User extends HasId {
  name: string;
  email: string;
}

let userRepository = new Repository();
userRepository.add({ id: 1, name: "Ali", email: "ali@example.com" });
userRepository.add({ id: 2, name: "Veli", email: "veli@example.com" });

let ali = userRepository.findById(1);
console.log(ali?.name); // Ali

Burada Repository diyerek, T tipinin mutlaka bir id: number özelliğine sahip olması gerektiğini belirtiyoruz. Bu, findById metodunun item.id‘ye güvenle erişebilmesini sağlar.

Önemli Not: Static üyeler generic tip değişkenlerini kullanamazlar. Bir sınıfın generic tipi, sınıfın instance’ı oluşturulduğunda belirlenirken, static üyeler instance’tan bağımsızdır.

Generic Tiplerle Çalışan Fonksiyon Tipleri

Bazen, generic bir fonksiyonun kendisini bir tip olarak tanımlamak isteyebiliriz. Bu, özellikle callback fonksiyonları veya fonksiyon imzalarını tanımlarken faydalıdır.

interface GenericIdentityFn {
  (arg: T): T;
}

function identity(arg: T): T {
  return arg;
}

let myIdentity: GenericIdentityFn = identity;

console.log(myIdentity(100)); // 100
// console.log(myIdentity("hello")); // Hata: 'string' tipi 'number' tipine atanamaz.

Bu örnekte GenericIdentityFn arayüzü, T tipinde bir argüman alıp T tipinde bir değer döndüren herhangi bir fonksiyonun imzasını temsil eder. myIdentity değişkeni bu arayüzü number tipiyle uyguladığı için, sadece number tipinde argümanları kabul eder.

Generic Kısıtlamalar (Generic Constraints) Detaylı İnceleme

Generic kısıtlamalar, generic tiplerin alabileceği değerleri daraltarak daha spesifik ve güvenli kod yazmamızı sağlar. extends anahtar kelimesi ile kullanılırlar.

* Belirli bir property’ye sahip olma kısıtlaması: Daha önce gördüğümüz Lengthwise örneği gibi.

interface Product {
      name: string;
      price: number;
    }

    function displayProductInfo(item: T): void {
      console.log(Product Name: ${item.name}, Price: $${item.price});
    }

    displayProductInfo({ name: "Laptop", price: 1200, category: "Electronics" }); // Çalışır
    // displayProductInfo({ id: 1, stock: 10 }); // Hata: 'Product' tipine atanabilir değil.

* Başka bir generic tip ile kısıtlama: Bir generic tipin başka bir generic tipin alt tipi olmasını sağlayabiliriz.

function copyFields(target: T, source: U): T {
      for (let id in source) {
        // target[id] = source[id]; // Hata: 'id' keyof T değil.
        // Bu tür atamalar için daha dikkatli olmak gerekir.
        // Örneğin, source'un tüm key'lerinin target'ta da olduğunu garanti etmek zor olabilir.
      }
      return target;
    }

    let x = { a: 1, b: 2, c: 3, d: 4 };
    let y = { a: 5, b: 6 };

    // copyFields(x, y); // x (T) U'dan (y) daha fazla property'ye sahip olabilir.
                       // Amaç, U'nun tüm property'lerinin T'de de olmasını sağlamak.
                       // Bu örnekte, T extends U, U'nun T'nin alt kümesi olduğunu belirtir.
                       // Yani T, U'daki tüm property'lere sahip olmalı ve muhtemelen fazlasına.

Bu örnek karmaşık olabilir. Daha basit bir örnek:

interface Named { name: string; }
    function greet(entity: T): string {
      return Hello, ${entity.name};
    }

    greet({ name: "Alice", age: 30 }); // Çalışır
    // greet({ age: 25 }); // Hata: 'name' özelliği eksik.

* Constructor kısıtlaması (new () => T): Bir sınıfın generic olarak örneğini oluşturmak istediğimizde kullanılır. Bu, fabrika (factory) fonksiyonları yazarken çok kullanışlıdır.

class Car {
      constructor(public brand: string) {}
      drive() { console.log(${this.brand} is driving.); }
    }

    class Motorcycle {
      constructor(public model: string) {}
      ride() { console.log(${this.model} is riding.); }
    }

    function createInstance(constructor: new (...args: any[]) => T, ...args: any[]): T {
      return new constructor(...args);
    }

    let myCar = createInstance(Car, "BMW");
    myCar.drive(); // BMW is driving.

    let myMotorcycle = createInstance(Motorcycle, "Harley");
    myMotorcycle.ride(); // Harley is riding.

Burada constructor: new (...args: any[]) => T ifadesi, constructor parametresinin, T tipinde bir instance döndüren bir constructor fonksiyonu olması gerektiğini belirtir.

keyof ve typeof ile Generic Kısıtlamalar

keyof operatörü, bir tipin tüm anahtar isimlerinin union tipini döndürür. Generics ile birleştiğinde, bir objenin belirli bir anahtarına güvenli bir şekilde erişmek için harika bir araçtır.

function getDeepProperty(obj: T, key1: K1, key2: K2): T[K1][K2] {
  return obj[key1][key2];
}

const userProfile = {
  id: 1,
  details: {
    name: "John Doe",
    age: 30,
    address: {
      city: "New York",
      zip: "10001"
    }
  }
};

let userName = getDeepProperty(userProfile, "details", "name"); // userName: string
let userCity = getDeepProperty(userProfile, "details", "address"); // userCity: { city: string, zip: string }
// let userInvalid = getDeepProperty(userProfile, "details", "invalid"); // Hata: 'invalid' 'details' tipinde yok.

typeof operatörü, bir değişkenin veya özelliğin tipini döndürür. Generic bağlamda, genellikle bir objenin yapısını bir tip olarak kullanmak için kullanılır.

const MY_CONFIG = {
  apiUrl: "https://api.example.com",
  timeout: 5000,
  debugMode: true
};

type ConfigType = typeof MY_CONFIG; // ConfigType: { apiUrl: string; timeout: number; debugMode: boolean; }

function updateConfig(config: T, key: K, value: T[K]): T {
  return { ...config, [key]: value };
}

let newConfig = updateConfig(MY_CONFIG, "timeout", 10000);
console.log(newConfig.timeout); // 10000

// let invalidUpdate = updateConfig(MY_CONFIG, "timeout", "20000"); // Hata: 'string' 'number' tipine atanamaz.

Gelişmiş Generic Kullanım Senaryoları

TypeScript’in utility tipleri ve gelişmiş tip sistem özellikleri, Generics ile birleştiğinde inanılmaz güçlü araçlar sunar.

Conditional Types ile Generics

Conditional Types (koşullu tipler), bir tipin başka bir tipe atanıp atanamayacağına bağlı olarak farklı tipler seçmemizi sağlar. T extends U ? X : Y sözdizimi ile tanımlanır. Generics ile birlikte kullanıldığında, dinamik ve esnek tip manipülasyonları yapmamızı sağlar.

// Exclude utility tipinin çalışma mantığına benzer
type MyExclude = T extends U ? never : T;

type ValidColors = MyExclude<"red" | "green" | "blue" | "black", "black">; // "red" | "green" | "blue"

// NonNullable utility tipinin çalışma mantığına benzer
type MyNonNullable = T extends null | undefined ? never : T;

type NullableString = string | null | undefined;
type NonNullableString = MyNonNullable; // string

Bu örnekler, T tipinin U tipine atanabiliyor olup olmadığına bağlı olarak bir tip seçer. Bu sayede, var olan tiplerden yeni tipler türetebiliriz.

Mapped Types ile Generics

Mapped Types, var olan bir tipin özelliklerini (keys) alarak yeni bir tip oluşturmamızı sağlar. Genellikle [P in K] sözdizimi ile kullanılırlar. keyof operatörü ile birleştiğinde, bir objenin tüm özelliklerini dönüştürebiliriz.

// Partial utility tipinin çalışma mantığına benzer
type MyPartial = {
  [P in keyof T]?: T[P]; // Tüm özellikleri opsiyonel yapar
};

interface UserProfile {
  name: string;
  email: string;
  age: number;
}

type PartialUserProfile = MyPartial;
// PartialUserProfile: { name?: string; email?: string; age?: number; }

// Readonly utility tipinin çalışma mantığına benzer
type MyReadonly = {
  readonly [P in keyof T]: T[P]; // Tüm özellikleri salt okunur yapar
};

type ReadonlyUserProfile = MyReadonly;
// ReadonlyUserProfile: { readonly name: string; readonly email: string; readonly age: number; }

// Kendi Mapped Type'ımızı yazma örneği:
type NullableProperties = {
  [P in keyof T]: T[P] | null; // Tüm özellikleri null olabilecek hale getirir
};

type UserWithNullableProps = NullableProperties;
// UserWithNullableProps: { name: string | null; email: string | null; age: number | null; }

Mapped Types, özellikle Pick, Omit, Record gibi TypeScript’in yerleşik utility tiplerinin arkasındaki mekanizmadır ve güçlü tip dönüşümlerine olanak tanır.

Template Literal Types ile Generics

TypeScript 4.1 ile tanıtılan Template Literal Types, string literal tipleri üzerinde dinamik manipülasyonlar yapmamızı sağlar. Generics ile birleştiğinde, string tabanlı tipleri programatik olarak oluşturabiliriz.

// Capitalize utility tipinin çalışma mantığına benzer
type MyCapitalize =
  S extends ${infer FirstLetter}${infer Rest}
    ? ${Uppercase}${Rest}
    : S;

type GreetMessage = MyCapitalize<"hello world">; // "Hello world"

// Kendi örneğimiz: Bir string'e önek ekleme
type AddPrefix = ${Prefix}${T};

type EventName = AddPrefix<"click", "on">; // "onclick"
type ApiEndpoint = AddPrefix<"users", "/api/">; // "/api/users"