Tutorial TypeScript #9: Generics

• 1. Generics dalam Function
• Function Tanpa Generics
• Function dengan Generics
• 2. Generics dalam Interface
• 3. Generics dalam Class
• 4. Constraint dalam Generics
• Kesimpulan

Halo teman-teman semuanya, pada artikel sebelumnya kita telah belajar banyak hal terkait Class dan Object-Oriented Programming di dalam TypeScript. Dan pada artikel kali ini kita akan belajar bersama-sama tentang Generics yang ada di dalam TypeScript.

Dalam TypeScript, Generics adalah fitur yang memungkinkan kita membuat kode yang fleksibel dan dapat digunakan kembali (reusable) dengan berbagai tipe data tanpa kehilangan keamanan tipe.

Generics biasanya digunakan dalam function, class, dan interface agar bisa bekerja dengan berbagai tipe data tanpa harus menuliskan tipe tertentu secara eksplisit.

1. Generics dalam Function

Biasanya, function di TypeScript menggunakan tipe data spesifik. Dengan Generics, kita bisa membuat function yang lebih fleksibel.

• Function Tanpa Generics

  function getFirst(arr: any[]): any {
    return arr[0];
  }
  
  console.log(getFirst(["Apple", "Banana"])); // Output: Apple
  console.log(getFirst([10, 20, 30])); // Output: 10
  

  Masalahnya adalah function ini mengembalikan any, sehingga kita kehilangan keamanan tipe data.

• Function dengan Generics

  Dengan Generics, kita bisa menentukan tipe data saat memanggil function.

  function getFirst<T>(arr: T[]): T {
    return arr[0];
  }
  
  console.log(getFirst<string>(["Apple", "Banana"])); // Output: Apple
  console.log(getFirst<number>([10, 20, 30])); // Output: 10
  

  Keuntungan menggunakan Generics:

  • Function tetap fleksibel, bisa menerima array string atau number.

  • TypeScript akan mengecek tipe data saat runtime untuk menghindari kesalahan.

2. Generics dalam Interface

Kita bisa menggunakan Generics dalam interface agar lebih fleksibel.

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

const angka: Pair<number, string> = { first: 1, second: "Satu" };
const koordinat: Pair<number, number> = { first: 10, second: 20 };

console.log(angka); // Output: { first: 1, second: 'Satu' }
console.log(koordinat); // Output: { first: 10, second: 20 }

Interface Pair<T, U> bisa digunakan dengan kombinasi tipe data yang berbeda.

3. Generics dalam Class

Generics juga bisa diterapkan dalam class untuk menyimpan dan mengambil data dengan tipe yang fleksibel.

class Storage<T> {
  private data: T[] = [];

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

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

const textStorage = new Storage<string>();
textStorage.add("Hello");
textStorage.add("World");
console.log(textStorage.getAll()); // Output: [ 'Hello', 'World' ]

const numberStorage = new Storage<number>();
numberStorage.add(100);
numberStorage.add(200);
console.log(numberStorage.getAll()); // Output: [ 100, 200 ]

Class Storage<T> bisa menyimpan string atau number tanpa kehilangan keamanan tipe data.

4. Constraint dalam Generics

Terkadang, kita ingin membatasi tipe data yang bisa digunakan dalam Generics. Ini bisa dilakukan dengan extends.

function getLength<T extends { length: number }>(item: T): number {
  return item.length;
}

console.log(getLength("TypeScript")); // Output: 10
console.log(getLength([1, 2, 3, 4])); // Output: 4
// console.log(getLength(100)); // ❌ Error: number tidak punya property length

T extends { length: number } memastikan bahwa hanya tipe data yang memiliki .length yang bisa digunakan (seperti string dan array).

Kesimpulan

Dalam artikel ini, kita telah belajar tentang:

• Generics dalam function untuk tipe data fleksibel.
• Generics dalam interface untuk membuat struktur data yang reusable.
• Generics dalam class agar bisa menangani berbagai tipe data.
• Constraint dalam Generics untuk membatasi tipe yang bisa digunakan.

Jika ada pertanyaan terkait artikel, silahkan bisa bertanya melalui kolom komentar atau bisa di group Telegram milik SantriKoding.

Terima Kasih