Generik TypeScript dengan Contoh

Generik TypeScript adalah fitur hebat yang memungkinkan Anda membuat komponen yang dapat digunakan kembali dan aman terhadap tipe. Generik menyediakan cara untuk membuat kelas, fungsi, dan antarmuka yang bekerja dengan berbagai tipe sambil mempertahankan keamanan tipe yang kuat. Artikel ini akan memperkenalkan Anda pada generik dan menunjukkan cara menggunakannya dengan contoh praktis.

Memahami Obat Generik

Generik memungkinkan Anda menentukan komponen dengan placeholder untuk tipe yang dioperasikannya. Alih-alih menentukan tipe konkret, Anda menggunakan parameter tipe generik yang dapat diganti dengan tipe apa pun saat komponen digunakan.

Sintaksis Dasar

Sintaks dasar untuk mendefinisikan tipe generik adalah dengan menggunakan tanda kurung siku <> dengan nama parameter tipe. Berikut contoh sederhananya:

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

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

Dalam contoh ini, identity adalah fungsi generik yang mengambil parameter value bertipe T dan mengembalikan nilai bertipe yang sama. Parameter tipe T diganti dengan tipe sebenarnya saat fungsi dipanggil.

Generik dengan Kelas

Generik juga dapat digunakan dengan kelas untuk membuat struktur data yang fleksibel dan dapat digunakan kembali. Berikut ini contoh kelas generik:

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

Dalam contoh ini, kelas Box didefinisikan dengan parameter tipe generik T. Kelas tersebut memiliki properti privat value bertipe T dan metode getValue yang mengembalikan nilai bertipe T.

Generik dengan Antarmuka

Generik dapat digunakan dengan antarmuka untuk menciptakan antarmuka yang fleksibel dan aman terhadap tipe. Berikut ini contohnya:

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

Dalam contoh ini, antarmuka Pair didefinisikan dengan dua parameter tipe generik T dan U. Antarmuka tersebut merepresentasikan sepasang nilai dengan tipe T dan U.

Generik dalam Fungsi

Generik dapat digunakan dalam fungsi untuk menangani beberapa tipe sekaligus menjaga keamanan tipe. Berikut ini contoh fungsi generik yang bekerja dengan array:

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]

Dalam contoh ini, fungsi reverseArray mengambil array bertipe T dan mengembalikan array terbalik dengan tipe yang sama. Parameter tipe T memastikan bahwa fungsi tersebut bekerja dengan array bertipe apa pun sambil tetap menjaga keamanan tipe.

Batasan pada Obat Generik

Terkadang Anda mungkin perlu menerapkan batasan pada parameter tipe generik untuk memastikannya memiliki properti tertentu. Hal ini dilakukan dengan menggunakan batasan:

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

Dalam contoh ini, fungsi logLength dibatasi pada tipe yang memiliki properti length. Hal ini memungkinkan fungsi untuk menerima string dan array tetapi tidak menerima angka atau tipe lain tanpa properti length.

Kesimpulan

Generik dalam TypeScript menyediakan cara yang ampuh untuk membuat komponen yang fleksibel dan dapat digunakan kembali sekaligus menjaga keamanan tipe yang kuat. Dengan memahami dan memanfaatkan generik, Anda dapat menulis kode yang lebih generik dan mudah beradaptasi, sehingga meningkatkan kualitas dan kemudahan perawatan aplikasi TypeScript Anda secara keseluruhan.

Bereksperimenlah dengan generik di proyek Anda untuk melihat manfaatnya dalam tindakan dan meningkatkan keterampilan pemrograman TypeScript Anda.