Cara Menggunakan Enum di TypeScript untuk Pemula

Q: Kapan sebaiknya menggunakan String Enum dibanding Numeric Enum?

Gunakan String Enum ketika nilai-nilainya perlu dibaca manusia — misalnya untuk disimpan di database, dikirim via REST API, atau ditampilkan di log. Gunakan Numeric Enum ketika kamu hanya butuh penanda urutan atau kode internal yang tidak perlu ditampilkan ke pengguna. Secara umum, String Enum lebih sering direkomendasikan karena lebih mudah di-debug.

Pendahuluan

Pernahkah kamu menulis kode yang penuh dengan angka-angka misterius seperti 0, 1, 2, 3 tanpa tahu artinya apa? Atau mungkin kamu pernah membuat konstanta string seperti "PENDING", "PROCESSING", "DELIVERED" yang tersebar di mana-mana dalam kode-mu?

Jika iya, maka Enum adalah solusinya.

Enum (singkatan dari Enumeration atau Enumerasi) adalah salah satu fitur TypeScript yang sangat berguna untuk membuat kode lebih mudah dibaca, lebih aman, dan lebih terorganisir. Bayangkan Enum seperti sebuah daftar pilihan resmi — kamu mendefinisikan semua nilai yang diperbolehkan di satu tempat, lalu cukup merujuk ke sana setiap saat.

Dalam artikel ini, kita akan belajar:

Apa itu Enum dan mengapa kita membutuhkannya
Jenis-jenis Enum yang tersedia di TypeScript
Cara mendefinisikan dan menggunakan Enum
Contoh kasus nyata menggunakan Enum untuk status pengiriman

Jika kamu sudah familiar dengan konsep fungsi dan tipe data di TypeScript, artikel ini akan sangat mudah dipahami. Mari mulai!

Apa itu Enum di TypeScript?

Enum adalah cara untuk mendefinisikan sekumpulan konstanta bernama yang berhubungan satu sama lain. Dengan Enum, kamu memberikan nama yang bermakna pada nilai-nilai tertentu, sehingga kode menjadi lebih readable (mudah dibaca).

Analogi Sederhana

Bayangkan kamu bekerja di sebuah kafe dan ada formulir pesanan dengan pilihan ukuran minuman:

0 = Small
1 = Medium
2 = Large

Jika formulir hanya menampilkan angka, pelayan akan kebingungan. Tapi jika formulir menampilkan kata Small, Medium, Large, semua orang langsung paham.

Itulah fungsi Enum — mengubah angka atau string mentah menjadi nilai yang bermakna dan mudah dipahami.

Tanpa Enum vs Dengan Enum

Perhatikan perbandingan ini:

// Tanpa Enum: angka-angka tidak bermakna
function prosesPesananLama(status: number): void {
  if (status === 0) {
    console.log("Pesanan sedang diproses");
  } else if (status === 1) {
    console.log("Pesanan dikirim");
  } else if (status === 2) {
    console.log("Pesanan selesai");
  }
}

// Memanggil fungsi — sulit tahu 0, 1, 2 artinya apa
prosesPesananLama(0);
prosesPesananLama(1);

/*
# Output yang diharapkan:
# > Pesanan sedang diproses
# > Pesanan dikirim
*/

// Dengan Enum: status pesanan jelas dan bermakna
enum StatusPesanan {
  Diproses,
  Dikirim,
  Selesai,
}

function prosesPesanan(status: StatusPesanan): void {
  if (status === StatusPesanan.Diproses) {
    console.log("Pesanan sedang diproses");
  } else if (status === StatusPesanan.Dikirim) {
    console.log("Pesanan sedang dikirim");
  } else if (status === StatusPesanan.Selesai) {
    console.log("Pesanan sudah selesai");
  }
}

// Memanggil fungsi — nama status langsung terbaca
prosesPesanan(StatusPesanan.Diproses);
prosesPesanan(StatusPesanan.Dikirim);
prosesPesanan(StatusPesanan.Selesai);

/*
# Output yang diharapkan:
# > Pesanan sedang diproses
# > Pesanan sedang dikirim
# > Pesanan sudah selesai
*/

Kode kedua jauh lebih mudah dibaca, bukan? Kita tidak perlu hafal “angka berapa artinya apa” lagi.

Jenis-jenis Enum di TypeScript

TypeScript menyediakan beberapa jenis Enum. Mari kita pelajari satu per satu.

1. Numeric Enum (Enum Numerik)

Ini adalah jenis Enum paling dasar. Nilai defaultnya dimulai dari 0 dan bertambah otomatis.

enum Arah {
  Utara,   // Nilai otomatis: 0
  Selatan, // Nilai otomatis: 1
  Timur,   // Nilai otomatis: 2
  Barat    // Nilai otomatis: 3
}

console.log(Arah.Utara);   // 0
console.log(Arah.Selatan); // 1
console.log(Arah.Timur);   // 2

/*
# Output yang diharapkan:
# > 0
# > 1
# > 2
*/

Kamu juga bisa menentukan nilai awal sendiri:

// Enum untuk menyimpan tingkat prioritas
enum Prioritas {
  Rendah = 1,
  Sedang = 2,
  Tinggi = 3,
}

console.log(Prioritas.Rendah); // 1
console.log(Prioritas.Sedang); // 2
console.log(Prioritas.Tinggi); // 3

/*
# Output yang diharapkan:
# > 1
# > 2
# > 3
*/

Atau bahkan melompat ke angka tertentu:

// Enum untuk kode status pesanan
enum KodePesanan {
  Baru      = 100,
  Diproses  = 200,
  Selesai   = 300,
}

const statusPesanan: KodePesanan = KodePesanan.Diproses;
console.log(`Kode status pesanan: ${statusPesanan}`);

/*
# Output yang diharapkan:
# > Kode status pesanan: 200
*/

2. String Enum (Enum String)

String Enum menggunakan nilai berupa string alih-alih angka. Ini sangat berguna ketika kamu perlu menyimpan nilai yang bisa dibaca manusia — misalnya untuk disimpan di database atau dikirim via API.

// Enum berisi daftar status pengiriman dengan nilai string yang deskriptif
enum StatusPengiriman {
  Pending    = "PENDING",
  Dikemas    = "DIKEMAS",
  Dikirim    = "DIKIRIM",
  Tiba       = "TIBA",
  Dibatalkan = "DIBATALKAN",
}

console.log(StatusPengiriman.Pending);    // PENDING
console.log(StatusPengiriman.Dikirim);   // DIKIRIM
console.log(StatusPengiriman.Tiba);      // TIBA

/*
# Output yang diharapkan:
# > PENDING
# > DIKIRIM
# > TIBA
*/

Keuntungan String Enum: nilainya lebih deskriptif dan mudah di-debug karena kamu bisa langsung melihat nilainya saat di-log.

3. Heterogeneous Enum (Enum Campuran)

TypeScript juga mengizinkan kombinasi angka dan string dalam satu Enum, meskipun ini jarang digunakan dan tidak disarankan karena bisa membingungkan.

enum Konfirmasi {
  Tidak = 0,   // Nilai bertipe angka
  Ya    = "YA" // Nilai bertipe string
}

console.log(Konfirmasi.Tidak); // 0
console.log(Konfirmasi.Ya);    // YA

/*
# Output yang diharapkan:
# > 0
# > YA
*/

Tips: Untuk kemudahan dan konsistensi, disarankan pilih salah satu saja — Numeric atau String Enum.

4. Const Enum

const enum adalah versi yang lebih efisien secara performa. Saat dikompilasi, TypeScript akan langsung mengganti referensi Enum dengan nilainya (inline substitution), sehingga tidak ada kode JavaScript tambahan yang dihasilkan.

const enum Warna {
  Merah = "RED",
  Hijau = "GREEN",
  Biru  = "BLUE",
}

const catDinding = Warna.Hijau;
console.log(catDinding);

/*
# Output yang diharapkan:
# > GREEN
*/

Cara Mendefinisikan dan Menggunakan Enum

Mendefinisikan Enum

Sintaks dasar untuk mendefinisikan Enum sangat sederhana:

enum NamaEnum {
  Nilai1, // Nilai pertama, otomatis bernilai 0
  Nilai2, // Nilai kedua, otomatis bernilai 1
  Nilai3  // Nilai ketiga, otomatis bernilai 2
}

const pilihan: NamaEnum = NamaEnum.Nilai2;

// Menampilkan nilai angka dari enum
console.log(pilihan);

// Menampilkan nama enum berdasarkan nilainya (reverse mapping)
console.log(NamaEnum[pilihan]);

/*
# Output yang diharapkan:
# > 1
# > Nilai2
*/

Menggunakan Enum sebagai Tipe Parameter

Salah satu kegunaan terbesar Enum adalah menjadi tipe untuk parameter fungsi, sehingga TypeScript bisa memvalidasi nilai yang masuk.

enum RolePengguna {
  Admin   = "ADMIN",
  Editor  = "EDITOR",
  Pembaca = "PEMBACA",
}

// Fungsi ini hanya menerima nilai dari enum RolePengguna
function tampilkanMenu(role: RolePengguna): void {
  switch (role) {
    case RolePengguna.Admin:
      console.log("Menampilkan menu Admin: kelola pengguna, laporan, pengaturan");
      break;
    case RolePengguna.Editor:
      console.log("Menampilkan menu Editor: tulis artikel, kelola konten");
      break;
    case RolePengguna.Pembaca:
      console.log("Menampilkan menu Pembaca: baca artikel, komentar");
      break;
  }
}

tampilkanMenu(RolePengguna.Admin);
tampilkanMenu(RolePengguna.Editor);

// TypeScript akan menolak nilai yang tidak ada di enum
// tampilkanMenu("SUPERUSER"); // Error: Argument of type '"SUPERUSER"' is not assignable

/*
# Output yang diharapkan:
# > Menampilkan menu Admin: kelola pengguna, laporan, pengaturan
# > Menampilkan menu Editor: tulis artikel, kelola konten
*/

Mengakses Nama dari Nilai (Reverse Mapping)

Khusus untuk Numeric Enum, TypeScript mendukung reverse mapping — kamu bisa mengambil nama dari nilainya.

// Enum StatusOrder dengan nilai angka otomatis
enum StatusOrder {
  Baru,     // 0
  Diproses, // 1
  Selesai   // 2
}

// Mengakses nama berdasarkan angka
console.log(StatusOrder[0]); // Baru
console.log(StatusOrder[1]); // Diproses
console.log(StatusOrder[2]); // Selesai

/*
# Output yang diharapkan:
# > Baru
# > Diproses
# > Selesai
*/

Catatan: Reverse mapping tidak tersedia untuk String Enum.

Enum di dalam Interface

Enum bisa dikombinasikan dengan interface untuk membangun struktur data yang lebih kuat. Ini mirip dengan konsep yang kamu pelajari saat mempelajari Interface di TypeScript — kita mendefinisikan struktur yang jelas dan terorganisir.

// Enum berisi pilihan metode pembayaran
enum MetodeBayar {
  Transfer = "TRANSFER",
  Kartu    = "KARTU_KREDIT",
  Dompet   = "E_WALLET",
}

// Interface menentukan struktur data untuk sebuah transaksi
interface Transaksi {
  id: string;
  jumlah: number;
  metode: MetodeBayar;
  tanggal: Date;
}

// Membuat data transaksi
const transaksi: Transaksi = {
  id: "TRX-001",
  jumlah: 150000,
  metode: MetodeBayar.Dompet,
  tanggal: new Date("2026-04-30"),
};

console.log(`Transaksi ID ${transaksi.id} sebesar Rp${transaksi.jumlah} menggunakan ${transaksi.metode}`);

/*
# Output yang diharapkan:
# > Transaksi ID TRX-001 sebesar Rp150000 menggunakan E_WALLET
*/

Contoh Kasus Nyata: Sistem Status Pengiriman

Bayangkan kamu sedang membangun aplikasi e-commerce sederhana, seperti jika ingin membangun sistem logistik untuk toko online. Berikut cara menggunakan Enum untuk mengelola status pengiriman secara terstruktur.

// Enum untuk semua kemungkinan status pengiriman
enum StatusPengiriman {
  Pending    = "PENDING",
  Dikemas    = "DIKEMAS",
  Dikirim    = "DIKIRIM",
  Tiba       = "TIBA",
  Dibatalkan = "DIBATALKAN",
}

// Interface untuk data paket pengiriman
interface Paket {
  id: string;
  penerima: string;
  status: StatusPengiriman;
}

// Fungsi untuk mendapatkan pesan berdasarkan status
function getPesanStatus(status: StatusPengiriman): string {
  switch (status) {
    case StatusPengiriman.Pending:
      return "Pesananmu sedang menunggu konfirmasi penjual.";
    case StatusPengiriman.Dikemas:
      return "Pesananmu sedang dikemas oleh penjual.";
    case StatusPengiriman.Dikirim:
      return "Pesananmu sudah dalam perjalanan!";
    case StatusPengiriman.Tiba:
      return "Pesananmu telah tiba. Selamat menikmati!";
    case StatusPengiriman.Dibatalkan:
      return "Pesananmu telah dibatalkan.";
    default:
      return "Status tidak diketahui.";
  }
}

// Simulasi data paket
const paket: Paket = {
  id: "PKT-2026-001",
  penerima: "Budi Santoso",
  status: StatusPengiriman.Dikirim,
};

console.log(`Paket ${paket.id} untuk ${paket.penerima}:`);
console.log(getPesanStatus(paket.status));

// Simulasi update status
paket.status = StatusPengiriman.Tiba;
console.log(`\nUpdate status paket ${paket.id}:`);
console.log(getPesanStatus(paket.status));

/*
# Output yang diharapkan:
# > Paket PKT-2026-001 untuk Budi Santoso:
# > Pesananmu sudah dalam perjalanan!
# >
# > Update status paket PKT-2026-001:
# > Pesananmu telah tiba. Selamat menikmati!
*/

Pertanyaan yang Sering Diajukan

Apa perbedaan antara Enum dan objek biasa di TypeScript?

Secara sekilas keduanya mirip, tapi ada perbedaan penting. Objek biasa bersifat lebih fleksibel dan nilainya bisa diubah kapan saja. Enum bersifat immutable (tidak bisa diubah setelah didefinisikan) dan TypeScript menggunakannya sebagai tipe data, sehingga kamu mendapat validasi otomatis saat kompilasi. Selain itu, Numeric Enum mendukung reverse mapping yang tidak ada di objek biasa.

Kapan sebaiknya menggunakan String Enum dibanding Numeric Enum?

Gunakan String Enum ketika nilai-nilainya perlu dibaca manusia — misalnya untuk disimpan di database, dikirim via REST API, atau ditampilkan di log. Gunakan Numeric Enum ketika kamu hanya butuh penanda urutan atau kode internal yang tidak perlu ditampilkan ke pengguna. Secara umum, String Enum lebih sering direkomendasikan karena lebih mudah di-debug.

Apakah Enum bisa digunakan bersama switch-case?

Ya, dan ini justru salah satu kombinasi paling populer! Menggunakan switch-case dengan Enum membuat kode sangat rapi dan TypeScript juga bisa memperingatkanmu jika ada nilai Enum yang belum ditangani (dengan fitur exhaustive check). Contoh penggunaannya sudah ada di bagian “Menggunakan Enum sebagai Tipe Parameter” dan “Contoh Kasus Nyata” di atas.

Apakah ada kekurangan menggunakan Enum di TypeScript?

Ada beberapa hal yang perlu diperhatikan. Pertama, Enum menghasilkan kode JavaScript tambahan saat dikompilasi (kecuali const enum). Kedua, Numeric Enum memiliki perilaku reverse mapping yang kadang membingungkan. Beberapa developer modern lebih memilih as const object sebagai alternatif yang lebih ringan, meskipun untuk kebanyakan proyek, Enum tetap pilihan yang baik.

Bisakah Enum memiliki method seperti class?

Tidak — Enum di TypeScript tidak bisa memiliki method langsung. Namun kamu bisa membuat fungsi helper terpisah yang menerima Enum sebagai parameter, seperti contoh fungsi getPesanStatus() di kasus nyata di atas. Jika kamu butuh logika yang lebih kompleks, pertimbangkan untuk menggunakan class dengan static properties.

Kesimpulan

Enum adalah fitur TypeScript yang sederhana namun sangat powerful. Dengan Enum, kamu bisa:

Menggantikan angka atau string acak dengan nama yang bermakna
Mencegah nilai invalid masuk ke dalam sistem, karena TypeScript akan memeriksa tipe secara otomatis
Membuat kode lebih mudah dibaca dan dipelihara, terutama dalam tim besar
Mendokumentasikan pilihan yang valid langsung di dalam kode itu sendiri

Kita sudah mempelajari empat jenis Enum utama (Numeric, String, Heterogeneous, dan Const Enum), cara menggunakannya bersama fungsi dan interface, serta contoh kasus nyata untuk mengelola status pengiriman.

Langkah selanjutnya? Coba implementasikan Enum di proyek TypeScript-mu sendiri — mulai dari hal kecil seperti mengelola tema tampilan (gelap/terang) atau status form (loading, sukses, error). Semakin sering kamu berlatih, semakin alami rasanya!

Selamat belajar dan terus semangat bereksperimen! Jika ada konsep yang masih membingungkan, jangan ragu untuk menjelajahi artikel-artikel lain di KamusNgoding — banyak topik menarik lainnya yang siap membantumu menjadi developer yang lebih baik.