Memahami TypeScript Generics: Fitur Tipe Data Bebas Tapi Ketat

Huruf Misterius di Dalam Kurung Siku

Saat kamu beralih dari JavaScript ke TypeScript, kamu akan mulai terbiasa mendefinisikan tipe data menggunakan interface atau type. Tapi suatu hari, kamu membuka library atau kode milik Senior Developer dan menemukan huruf bertebaran di mana-mana. Apa maksudnya?

Simbol tersebut adalah fitur Generics. Generics ibarat Template atau "Wadah Kosong" untuk tipe data.

Analogi Kardus Ajaib

Bayangkan kamu punya sebuah kotak kardus. Kalau kamu menulis TypeScript biasa: Kardus: Buku, kardus itu SELAMANYA hanya boleh diisi oleh buku. Jika besok kamu ingin menyimpan Baju, kamu harus membuat (menulis kode) Kardus baru bernama KardusBaju. Ini sangat membuang waktu (melanggar prinsip DRY).

Dengan Generics, kamu membuat kardus ajaib: Kardus.

Huruf T (singkatan dari Type) adalah tempat kosong. Saat kamu memakai kardus itu nanti, barulah kamu menempelkan labelnya. "Hai Kardus, hari ini kamu adalah Kardus!". Besoknya kamu bisa bilang: "Hai Kardus yang sama, hari ini jadilah Kardus!".

Contoh Kode Generics di Fungsi

Misalkan kita membuat fungsi untuk mengembalikan data apa saja yang dimasukkan kepadanya.

// Tanpa Generics (Buruk, pakai 'any' menghilangkan fitur keamanan TS)
function balikanData(data: any): any {
  return data;
}

// MENGGUNAKAN GENERICS (Aman dan Cerdas)
function balikanData<T>(data: T): T {
  return data;
}

// Cara Memakainya:
const hasilTeks = balikanData<string>("Halo"); // TS tahu 'hasilTeks' adalah string
const hasilAngka = balikanData<number>(100);  // TS tahu 'hasilAngka' adalah number

Kenapa Ini Sangat Penting di React?

Jika kamu mengambil data dari API (Fetch/Axios), TypeScript tidak tahu data apa yang dikembalikan oleh server. Dengan Generics, kamu bisa menyuntikkan bentuk tipe datamu ke fungsi Axios tersebut.

// Kita memberitahu Axios bahwa hasil GET ini berbentuk Array of User
axios.get<User[]>('/api/users').then(res => {
  console.log(res.data[0].nama); // Autocomplete akan langsung muncul!
});