Generics Dasar TS

Generics Dasar TS | Dasar TypeScript untuk JavaScript Developer | Mahir.dev | Mahir.dev Academy

function identitasJS(arg) {
  return arg;
}
let outputJS = identitasJS("halo"); // outputJS tipenya any
let outputLainJS = identitasJS(123); // outputLainJS juga any

Sintaks Dasar Fungsi Generic:

typescript

function namaFungsiGeneric<T>(argumen: T): T {
    // Di dalem sini, 'T' bisa dianggap sebagai tipe data apa pun
    // yang dikasih pas fungsi ini dipanggil.
    // Return type-nya juga T, jadi sama kayak tipe argumen.
    return argumen;
}

<T> setelah nama fungsi: Ini yang ngedeklarasiin kalau fungsi ini adalah fungsi generic dengan satu type variable bernama T.
argumen: T: Parameter argumen tipenya T.
: T setelah kurung parameter: Return type fungsi ini juga T.

typescript

function identitas<T>(arg: T): T {
    console.log("Tipe argumennya adalah:", typeof arg);
    return arg;
}
 
// Cara pake fungsi generic:
 
// 1. TypeScript bisa nebak (infer) tipe T dari argumen yang dikasih:
let outputString = identitas("Halo TypeScript!"); // T ditebak jadi string
console.log(outputString.toUpperCase()); // Oke, karena outputString itu string
 
let outputNumber = identitas(12345); // T ditebak jadi number
console.log(outputNumber.toFixed(2)); // Oke, karena outputNumber itu number
 
let outputBoolean = identitas(true); // T ditebak jadi boolean
 
// 2. Atau, kamu bisa juga nulis tipe T-nya secara eksplisit pas manggil (jarang perlu kalau bisa di-infer):
let outputTanggal = identitas<Date>(new Date()); // Eksplisit bilang T itu Date
console.log(outputTanggal.getFullYear()); // Oke

typescript

function ambilElemenPertama<TipeElemen>(arr: TipeElemen[]): TipeElemen | undefined {
    return arr.length > 0 ? arr[0] : undefined;
}
 
let angkaPertama = ambilElemenPertama([10, 20, 30]); // TipeElemen jadi number, angkaPertama jadi number | undefined
console.log(angkaPertama); // Output: 10
 
let namaPertama = ambilElemenPertama(["Adi", "Budi"]); // TipeElemen jadi string, namaPertama jadi string | undefined
console.log(namaPertama); // Output: Adi
 
let kosong = ambilElemenPertama([]); // TipeElemen bisa apa aja, kosong jadi undefined
console.log(kosong); // Output: undefined

typescript

interface Kotak<TipeIsi> {
    isi: TipeIsi;
    bukaKotak: () => TipeIsi;
    tambahLabel: (label: string) => void;
}
 
// Bikin Kotak yang isinya string
let kotakSurat: Kotak<string> = {
    isi: "Surat penting!",
    bukaKotak: function() { return this.isi; },
    tambahLabel: (label) => console.log(`Label ditambahkan: ${label}`)
};
console.log(kotakSurat.bukaKotak().toUpperCase()); // Oke, karena isinya string
 
// Bikin Kotak yang isinya number
let kotakAngka: Kotak<number> = {
    isi: 123,
    bukaKotak: function() { return this.isi; },
    tambahLabel: (label) => console.log(`Label angka: ${label}`)
};
console.log(kotakAngka.bukaKotak().toFixed(2)); // Oke, karena isinya number
 
// let kotakSalah: Kotak<number> = { isi: "salah tipe" }; // ERROR!

typescript

class Koleksi<T> {
    private data: T[] = [];
 
    tambah(item: T): void {
        this.data.push(item);
    }
 
    ambilSemua(): T[] {
        return this.data;
    }
}
 
let koleksiNama = new Koleksi<string>();
koleksiNama.tambah("Budi");
koleksiNama.tambah("Ani");
// koleksiNama.tambah(123); // ERROR!
 
let koleksiAngka = new Koleksi<number>();
koleksiAngka.tambah(10);

typescript

interface PunyaPanjang {
    length: number; // Semua yang punya properti length bertipe number
}
 
// Fungsi ini nerima T, TAPI T-nya harus punya properti 'length'
function cetakPanjang<T extends PunyaPanjang>(arg: T): void {
    console.log("Panjangnya adalah:", arg.length);
}
 
cetakPanjang("Halo Dunia"); // Oke, string punya .length
cetakPanjang([1, 2, 3, 4]);   // Oke, array punya .length
// cetakPanjang(123);        // ERROR! Angka gak punya .length
// cetakPanjang({nama: "Budi"}); // ERROR! Objek ini gak punya .length (kecuali didefinisiin)
 
let objekDenganPanjang = { length: 10, isi: "sesuatu" };
cetakPanjang(objekDenganPanjang); // Oke

Kode Jadi "Bunglon" Cerdas: Kenalan Sama Generics di TypeScript!

Apa Itu Generics? Kode yang Bisa Beradaptasi Sama Tipe!

Generics pada Fungsi: Bikin Fungsi "Satu untuk Semua" (Tipe)

Generics pada Interface dan Type Aliases: "Cetakan Bentuk" yang Fleksibel

Generics pada Class (Pengenalan Singkat)

Generic Constraints (Batasan Tipe Generic) - Biar Gak Terlalu Bebas

Kuis Generics Dasar TypeScript

Diskusi Pelajaran