Tutorial TypeScript #6: Literal Types


Tutorial TypeScript #6: Literal Types

Halo teman-teman semuanya, pada artikel sebelumnya kita semua telah belajar tentang Interface dan Type Alias di dalam TypeScript dan pada artikel kali ini kita semua akan belajar tentang Literal Types di dalam TypeScript.

Dalam TypeScript, Literal Types memungkinkan kita untuk menetapkan nilai yang spesifik ke suatu variabel. Ini sangat berguna untuk membatasi pilihan nilai agar lebih aman dan mengurangi kemungkinan kesalahan.

1. String Literal Types

String literal types membatasi variabel hanya bisa berisi nilai tertentu.

let arah: "kiri" | "kanan" | "atas" | "bawah";

arah = "kiri"; // ✅ Benar
arah = "kanan"; // ✅ Benar
// arah = "maju"; // ❌ Error: "maju" bukan bagian dari tipe yang diizinkan

Variabel arah hanya bisa berisi "kiri", "kanan", "atas", atau "bawah".

2. Number Literal Types

Kita juga bisa membatasi variabel hanya pada angka tertentu.

let kodeStatus: 200 | 400 | 500;

kodeStatus = 200; // ✅ Benar
// kodeStatus = 300; // ❌ Error: 300 tidak diizinkan

Ini berguna untuk status kode HTTP atau nilai angka yang memiliki arti spesifik.

3. Boolean Literal Types

Kita juga bisa menggunakan nilai boolean literal.

let isActive: true;

isActive = true; // ✅ Benar
// isActive = false; // ❌ Error: hanya "true" yang diperbolehkan

Berguna jika suatu variabel hanya boleh memiliki satu nilai spesifik.

4. Literal Types dengan Union Types

Literal types sering digunakan dengan union types untuk membuat daftar nilai yang valid.

type Role = "admin" | "user" | "guest";

function akses(role: Role) {
  if (role === "admin") {
    console.log("Akses penuh diberikan.");
  } else if (role === "user") {
    console.log("Akses terbatas.");
  } else {
    console.log("Tidak ada akses.");
  }
}

akses("admin"); // ✅ Output: Akses penuh diberikan
akses("guest"); // ✅ Output: Tidak ada akses
// akses("moderator"); // ❌ Error: "moderator" tidak diizinkan

Role hanya bisa diisi "admin", "user", atau "guest", sehingga lebih aman.

5. Literal Types dalam Function Parameter

Kita bisa menggunakan literal types untuk membatasi parameter function.

function setMode(mode: "light" | "dark") {
  console.log(`Mode diatur ke ${mode}`);
}

setMode("light"); // ✅ Output: Mode diatur ke light
// setMode("blue"); // ❌ Error: "blue" bukan nilai yang diperbolehkan

Mencegah input yang salah dengan hanya menerima "light" atau "dark".

Kesimpulan

Pada artikel kali ini kita belajar tetang Literal Types di dalam TypeScript, yaitu digunakan untuk membantu meningkatkan keamanan kode dengan memastikan bahwa variabel hanya bisa memiliki nilai tertentu yang telah ditentukan sebelumnya.

Fitur ini sangat berguna dalam berbagai skenario, seperti validasi input, status kode, atau role pengguna, karena dapat membatasi kemungkinan nilai yang dapat digunakan.

Pada artikel selanjutnya, kita semua akan belajar tentang Enum dan Tuple di dalam TypeScript.

Terima Kasih


Fika Ridaul Maulayya
Full-Stack Developer, Content Creator and CO-Founder SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami