keyof dan typeof

keyof: Union dari Semua Kunci

interface Pengguna {
  id: number;
  nama: string;
  email: string;
}

type KunciPengguna = keyof Pengguna;
// sama dengan: "id" | "nama" | "email"

function ambil(p: Pengguna, kunci: KunciPengguna) {
  return p[kunci];
}

ambil({ id: 1, nama: "Ana", email: "[email protected]" }, "nama");   // ok
ambil({ id: 1, nama: "Ana", email: "[email protected]" }, "alamat"); // Error

Tanpa keyof, parameter kunci harus diketik string dan typo seperti "namaa" lolos lalu menghasilkan undefined saat runtime.

typeof: Tipe dari Sebuah Value

Kata typeof di TypeScript berbeda dengan typeof JavaScript. Di level tipe, ia mengambil tipe dari variabel atau value yang sudah ada:

const konfigurasi = {
  host: "localhost",
  port: 3000,
  debug: true,
};

type Konfigurasi = typeof konfigurasi;
// { host: string; port: number; debug: boolean }

Berguna saat bentuk data didefinisikan sekali sebagai value (misalnya default config) lalu dipakai sebagai tipe di tempat lain. Ubah value-nya, tipenya ikut berubah otomatis.

Kombinasi Keduanya

const warna = {
  primer: "#8B5CF6",
  sekunder: "#D946EF",
} as const;

type NamaWarna = keyof typeof warna; // "primer" | "sekunder"
type KodeWarna = (typeof warna)[NamaWarna]; // "#8B5CF6" | "#D946EF"

Pola keyof typeof sangat umum untuk object konstan: daftar pilihan yang single-source dari satu object. Tambah warna baru di object, union-nya ikut bertambah tanpa edit manual.

Indexed Access Type

(typeof warna)[NamaWarna] disebut indexed access: "tipe dari properti yang kuncinya NamaWarna". Sintaksnya mirip akses array, tapi terjadi di level tipe.

Catatan teknis: typeof di level tipe hanya bisa dipakai pada identifier (nama variabel), bukan ekspresi sembarang. typeof ambilData() itu error; simpan dulu ke variabel: const hasil = ambilData(); type T = typeof hasil;. Dan ingat, ini murni compile-time: tidak ada kode runtime yang dihasilkan.