literaltipe-dataMenengah3 mnt baca

Literal Type

Tipe dari nilai spesifik: string literal, number literal, dan kombinasinya.

Analogi: Menu yang Pilihannya Tetap

Di warteg, lauknya cuma itu-itu saja: ayam, tempe, telur. Kamu tidak bisa pesan "steak wagyu", abangnya akan menolak. Literal type adalah "menu tetap" untuk nilai: variabel hanya boleh diisi nilai-nilai tertentu, sisanya ditolak compiler.

typescript
let arah: "kiri" | "kanan" | "atas" | "bawah";
arah = "kiri";   // OK, ada di menu
arah = "serong";
// Error: Type '"serong"' is not assignable to
//        type '"kiri" | "kanan" | "atas" | "bawah"'.

Ini jauh lebih aman daripada string bebas untuk nilai yang memang terbatas: typo ketahuan saat nulis kode, bukan saat aplikasi jalan.

const Otomatis Jadi Literal

typescript
const METODE = "GET"; // tipenya "GET", bukan string
let m: string = METODE; // OK, literal bisa masuk ke string

Tapi properti object berperilaku beda: tipenya "melebar" jadi string kecuali dikunci dengan as const:

typescript
const config = { metode: "GET" }; // metode: string (melebar!)

function request(metode: "GET" | "POST") { /* ... */ }
request(config.metode);
// Error: Argument of type 'string' is not assignable to
//        parameter of type '"GET" | "POST"'.

const config2 = { metode: "GET" } as const; // metode: "GET", readonly
request(config2.metode); // OK

Error di atas adalah jebakan klasik: object literal terlihat "pasti", tapi TypeScript menganggap propertinya bisa diubah sehingga tipenya dilebarkan. as const mengunci nilainya sekaligus membuatnya readonly.

Kapan Dipakai di Project Nyata

  • State machine: type Status = "idle" | "loading" | "sukses" | "error" untuk status fetch data.
  • Opsi terbatas: parameter align: "left" | "center" | "right", metode HTTP, peran user.
  • Discriminated union: dikombinasikan dengan union object (modul narrowing-discriminated-union), ini pola standar untuk memodelkan state aplikasi yang bercabang.

Catatan teknis: Literal tidak cuma string. Number literal (type Dadu = 1 | 2 | 3 | 4 | 5 | 6) dan boolean literal (true saja) juga valid, berguna untuk kode status dan flag yang nilainya tetap.

Contoh Nyata: Validasi di Batas Fungsi

typescript
type Peran = "admin" | "kasir" | "gudang";

function buatAkun(nama: string, peran: Peran) {
  // ...
}

buatAkun("Budi", "admin");  // OK
buatAkun("Ani", "manajer");
// Error: Argument of type '"manajer"' is not assignable
//        to parameter of type 'Peran'.

Typo seperti "admn" atau peran yang tidak ada langsung ditolak saat nulis kode, plus editor memberi autocomplete daftar nilai yang valid. Tanpa literal type, string bebas lolos dan error baru muncul sebagai bug logika di production, misalnya user mendapat hak akses yang salah tanpa ada yang sadar.

Tantangan

State machine lampu

Buat type Lampu = "merah" | "kuning" | "hijau" dan fungsi aksi(l: Lampu): string yang mengembalikan "berhenti" / "hati-hati" / "jalan". Coba panggil dengan "biru" dan amati errornya.

typescript
type Lampu = "merah" | "kuning" | "hijau";

function aksi(l: Lampu): string {
  // lengkapi
}

console.log(aksi("hijau")); // "jalan"
// console.log(aksi("biru")); // ???