Örneklerle TypeScript Jenerikleri

TypeScript jenerikleri, yeniden kullanılabilir ve tür güvenli bileşenler oluşturmanıza olanak tanıyan güçlü bir özelliktir. Jenerikler, güçlü tür güvenliğini korurken çeşitli türlerle çalışan sınıflar, işlevler ve arayüzler oluşturmanın bir yolunu sağlar. Bu makale sizi jeneriklerle tanıştıracak ve pratik örneklerle bunların nasıl kullanılacağını gösterecektir.

Jenerikleri Anlamak

Jenerikler, bir bileşeni, üzerinde çalıştığı tür için bir yer tutucuyla tanımlamanızı sağlar. Somut bir tür belirtmek yerine, bileşen kullanıldığında herhangi bir türle değiştirilebilen bir jenerik tür parametresi kullanırsınız.

Temel Sözdizimi

Genel bir türü tanımlamanın temel sözdizimi, bir tür parametre adıyla <> açılı parantezleri kullanmaktır. İşte basit bir örnek:

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

const stringIdentity = identity("Hello"); // string
const numberIdentity = identity(123); // number

Bu örnekte, identity, T türünde bir value parametresi alan ve aynı türde bir değer döndüren genel bir fonksiyondur. Fonksiyon çağrıldığında T tür parametresi gerçek türle değiştirilir.

Sınıflı Jenerikler

Jenerikler, esnek ve yeniden kullanılabilir veri yapıları oluşturmak için sınıflarla birlikte de kullanılabilir. İşte jenerik bir sınıfın örneği:

class Box {
  private value: T;

  constructor(value: T) {
    this.value = value;
  }

  getValue(): T {
    return this.value;
  }
}

const stringBox = new Box("TypeScript");
console.log(stringBox.getValue()); // Output: TypeScript

const numberBox = new Box(42);
console.log(numberBox.getValue()); // Output: 42

Bu örnekte, Box sınıfı genel bir tür parametresi T ile tanımlanmıştır. Sınıfın T türünde özel bir value özelliği ve T türündeki değeri döndüren bir getValue yöntemi vardır.

Arayüzlü Jenerikler

Generics, esnek ve tür güvenli arayüzler oluşturmak için arayüzlerle birlikte kullanılabilir. İşte bir örnek:

interface Pair<T, U> {
  first: T;
  second: U;
}

const pair: Pair<string, number> = {
  first: "Age",
  second: 30
};

console.log(pair.first); // Output: Age
console.log(pair.second); // Output: 30

Bu örnekte, Pair arayüzü iki genel tür parametresi T ve U ile tanımlanmıştır. Arayüz, sırasıyla T ve U türlerine sahip bir değer çiftini temsil eder.

Fonksiyonlarda Jenerikler

Jenerikler, tür güvenliğini korurken birden fazla türü işlemek için işlevlerde kullanılabilir. İşte dizilerle çalışan bir jenerik işlev örneği:

function reverseArray(items: T[]): T[] {
  return items.reverse();
}

const reversedStringArray = reverseArray(["one", "two", "three"]);
console.log(reversedStringArray); // Output: ["three", "two", "one"]

const reversedNumberArray = reverseArray([1, 2, 3]);
console.log(reversedNumberArray); // Output: [3, 2, 1]

Bu örnekte, reverseArray fonksiyonu T türünde bir dizi alır ve aynı türden ters bir dizi döndürür. T tür parametresi, fonksiyonun tür güvenliğini korurken herhangi bir türdeki dizilerle çalışmasını sağlar.

Jenerikler Üzerindeki Kısıtlamalar

Bazen, belirli özelliklere sahip olduğundan emin olmak için genel tür parametresine kısıtlamalar koymanız gerekebilir. Bu, kısıtlamalar kullanılarak yapılır:

function logLength(item: T): void {
  console.log(item.length);
}

logLength("Hello, TypeScript"); // Output: 16
logLength([1, 2, 3]); // Output: 3
// logLength(123); // Error: number does not have a length property

Bu örnekte, logLength işlevi, length özelliğine sahip türlerle sınırlıdır. Bu, işlevin dizeleri ve dizileri kabul etmesine izin verir ancak length özelliği olmayan sayıları veya diğer türleri kabul etmez.

Çözüm

TypeScript'teki jenerikler, güçlü tip güvenliğini korurken esnek ve yeniden kullanılabilir bileşenler oluşturmak için güçlü bir yol sağlar. Jenerikleri anlayarak ve kullanarak, daha jenerik ve uyarlanabilir kod yazabilir, TypeScript uygulamalarınızın genel kalitesini ve sürdürülebilirliğini iyileştirebilirsiniz.

Projelerinizde jenerikleri deneyerek faydalarını görün ve TypeScript programlama becerilerinizi geliştirin.