Belajar TypeScript - Advanced Mapped Types dan Conditional Types

#Pendahuluan

Sejauh ini kalian membuat tipe dari nol. Episode 12 mengubah cara berpikir: tipe bisa dihasilkan dari tipe lain. Dengan operasi tipe, satu definisi sumber bisa melahirkan varian opsional, readonly, hasil pemilihan properti, atau bentuk yang bergantung pada kondisi.

Kekuatan ini disediakan dua keluarga: mapped types yang mengulang properti untuk membentuk tipe baru, dan conditional types yang memilih tipe berdasarkan kondisi. Utility types bawaan seperti Partial dan Omit hanyalah hasil gabungan keduanya.

Episode 12 membedah keduanya dari konsep sampai pola infer, lalu menutup dengan utility types yang paling sering dipakai. Kalian akan membaca tipe library yang tampak rumit dengan pemahaman, bukan tebakan.

#keyof dan Mapped Type

#Iterasi atas Properti

Mapped type mengulang setiap kunci properti dari tipe sumber:

type Opsional<T> = {
    [K in keyof T]?: T[K];
};
 
interface Pengguna {
    nama: string;
    umur: number;
}
 
type PenggunaOpsional = Opsional<Pengguna>;

Deklarasi [K in keyof T] mengiterasi kunci-kunci T, lalu T[K] mengambil tipe dari kunci itu. Opsional<Pengguna> menghasilkan bentuk dengan semua properti bertanda tanya. Hasilnya setara Partial<Pengguna> yang dibahas di bawah.

#Menambahkan Modifier

Mapped type juga bisa menambah atau mencabut modifier:

type Terkunci<T> = {
    readonly [K in keyof T]: T[K];
};
 
const data: Terkunci<Pengguna> = { nama: "Andi", umur: 25 };
data.nama = "Budi";

Tanda readonly pada hasil memetakan setiap properti menjadi readonly. Modifier readonly dan opsional bisa dicabut dengan awalan minus, misalnya -readonly dan -?. Mapped type memberi kendali penuh atas bentuk keluaran.

#Key Remapping dengan as

Kunci hasil pemetaan bisa diubah menggunakan kata kunci as:

type Prefiks<K extends string> = {
    [P in K as `get${Capitalize<P>}`]: () => string;
};
 
type Akses = Prefiks<"nama" | "umur">;

Pemetaan dengan kata kunci as mengganti nama kunci menjadi bentuk getter, misalnya getNama. Remapping kunci menjadi dasar utility seperti Omit dan banyak library validasi. Ekspresi template di level tipe membuka ruang ekspresi yang sangat besar.

#Conditional Type

#T extends U ? X : Y

Conditional type memilih tipe berdasarkan kesesuaian:

type TipeParam<T> = T extends string ? "teks" : "lainnya";
 
type A = TipeParam<string>;
type B = TipeParam<number>;

TipeParam<string> bernilai "teks" karena string memenuhi T extends string. TipeParam<number> jatuh ke cabang "lainnya". Conditional type bekerja seperti ternary pada level tipe dan menjadi dasar banyak pola lanjutan.

#Distribusi dan infer

Conditional type menyebar otomatis ke anggota union, dan infer menangkap tipe dari dalam struktur:

type Elemen<T> = T extends (infer U)[] ? U : never;
 
type Nomor = Elemen<number[]>;
type StringAta = Elemen<string[]>;
 
type Terlepas<T> = T extends Promise<infer U> ? U : T;
type Hasil = Terlepas<Promise<number>>;

infer U menangkap tipe elemen array atau nilai dalam Promise. Terlepas<Promise<number>> bernilai number, sementara Terlepas<string> tetap string. Utility seperti Awaited dan ReturnType dibangun dari pola infer ini.

#Utility Types dari Mapped dan Conditional

TypeScript menyediakan utility yang siap pakai:

interface Pesanan {
    id: number;
    nama: string;
    jumlah: number;
}
 
type Sebagian = Partial<Pesanan>;
type Dipilih = Pick<Pesanan, "id" | "nama">;
type Dibuang = Omit<Pesanan, "jumlah">;
type Petakan = Record<string, number>;

Partial membuat semua properti opsional, Pick mengambil subset properti, Omit membuang properti, dan Record membuat objek dengan pola kunci dan nilai seragam. Keempatnya adalah utility yang paling sering dipakai dan semuanya lahir dari mapped type.

#Penutup

Episode 12 memberi kalian kemampuan tingkat lanjut: mapped type mengubah bentuk tipe, conditional type memilih berdasarkan kondisi, dan infer menangkap tipe tersembunyi. Dengan ini, utility types bawaan bukan lagi kotak hitam.

Inti yang harus dibawa pulang:

• Mapped type mengiterasi properti dengan [K in keyof T].
• Modifier readonly dan opsional bisa ditambah atau dicabut.
• Key remapping dengan as mengubah nama kunci hasil pemetaan.
• Conditional type T extends U ? X : Y memilih tipe berdasar kondisi.
• infer menangkap tipe dari dalam struktur seperti Promise dan array.
• Partial, Pick, Omit, dan Record adalah utility yang paling sering dipakai.

Di episode 13 selanjutnya kita akan membahas migrasi kode JavaScript ke TypeScript, yaitu strategi bertahap mengamankan codebase yang sudah berjalan tanpa menulis ulang semuanya sekaligus.