Masukkan Password
09 Enums dalam TypeScript
1. Apa itu enum?
enum adalah salah satu tipe khusus di TypeScript yang digunakan untuk membuat sekumpulan nilai yang memiliki nama.
Sederhananya:
Enum = kumpulan pilihan yang sudah kita beri nama.
Misalnya sebuah user mempunyai role:
adminreadOnlywriteOnlyreadWrite
Daripada kita menggunakan string secara langsung di banyak tempat:
user.role = "admin";
if (user.role === "admin") {
console.log("This user is an admin");
}
kita bisa membuat kumpulan role:
enum Roles {
Admin,
ReadOnly,
WriteOnly,
ReadWrite
}
Kemudian menggunakannya:
user.role = Roles.Admin;
if (user.role === Roles.Admin) {
console.log("This user is an admin");
}
Ini membuat kode lebih terstruktur, konsisten, dan mudah dibaca.
2. Kenapa tidak menggunakan string saja?
Sebenarnya kita bisa menggunakan string:
user.role = "admin";
Tapi bayangkan aplikasi besar.
Di satu file kita menulis:
"admin"
Di file lain:
"Admin"
Di tempat lain:
"administrator"
Atau typo:
"admn"
Semua ini bisa menjadi sumber masalah.
Dengan enum, kita punya satu sumber pilihan:
enum Roles {
Admin,
ReadOnly,
WriteOnly,
ReadWrite
}
Kemudian:
Roles.Admin
Roles.ReadOnly
Roles.WriteOnly
Roles.ReadWrite
IDE juga bisa membantu autocomplete.
3. Contoh kasus dari lecture
Misalnya kita mempunyai object:
const user = {
name: "John",
age: 30,
gender: "male",
role: "admin"
};
Kita ingin mengecek:
if (user.role === "admin") {
console.log("This user is an admin");
}
Artinya:
“Kalau role user adalah admin, lakukan sesuatu.”
Cara ini valid.
Tetapi lecture menunjukkan beberapa pendekatan lain.
4. Pendekatan pertama: menggunakan constant
Kita bisa membuat constant:
const admin = "admin";
Kemudian:
if (user.role === admin) {
console.log("This user is an admin");
}
Atau menggunakan angka:
const admin = 0;
const readOnly = 1;
const writeOnly = 2;
const readWrite = 3;
Kemudian:
user.role = admin;
dan:
if (user.role === admin) {
console.log("This user is an admin");
}
Masalahnya, kalau pilihan semakin banyak, kita harus membuat banyak constant secara manual.
const admin = 0;
const readOnly = 1;
const writeOnly = 2;
const readWrite = 3;
TypeScript menyediakan enum untuk kasus seperti ini.
5. Membuat enum
Syntax dasarnya:
enum Roles {
Admin,
ReadOnly,
WriteOnly,
ReadWrite
}
Perhatikan:
enum Roles
Roles adalah nama enum.
Sedangkan:
Admin,
ReadOnly,
WriteOnly,
ReadWrite
adalah member/named value dari enum tersebut.
Jadi kita sekarang mempunyai:
Roles
├── Admin
├── ReadOnly
├── WriteOnly
└── ReadWrite
6. Enum bukan object biasa
Ini penting.
Ketika kita melihat:
enum Roles {
Admin,
ReadOnly,
WriteOnly,
ReadWrite
}
memang bentuknya mirip object:
const Roles = {
Admin: ...,
ReadOnly: ...,
WriteOnly: ...,
ReadWrite: ...
};
Tetapi secara konsep di TypeScript, enum bukan object biasa.
enum adalah fitur/type khusus TypeScript.
7. Nilai enum dimulai dari 0
Ini salah satu hal terpenting dari lecture.
Ketika kita menulis:
enum Roles {
Admin,
ReadOnly,
WriteOnly,
ReadWrite
}
TypeScript secara default memberikan nilai numerik:
Admin → 0
ReadOnly → 1
WriteOnly → 2
ReadWrite → 3
Jadi sebenarnya kurang lebih:
Roles.Admin // 0
Roles.ReadOnly // 1
Roles.WriteOnly // 2
Roles.ReadWrite // 3
Kita tidak perlu menuliskan angkanya sendiri.
8. Kenapa mulai dari 0?
Karena enum numeric secara default menggunakan urutan angka:
member pertama → 0
member kedua → 1
member ketiga → 2
member keempat → 3
Misalnya:
enum Status {
Pending,
Approved,
Rejected
}
maka:
Pending → 0
Approved → 1
Rejected → 2
9. Cara menggunakan enum
Misalnya:
enum Roles {
Admin,
ReadOnly,
WriteOnly,
ReadWrite
}
Kita mempunyai user:
const user = {
name: "John",
age: 30,
gender: "male",
role: Roles.Admin
};
Sekarang:
user.role
memiliki nilai:
0
karena:
Roles.Admin
bernilai 0.
10. Mengecek role menggunakan enum
Kita bisa menulis:
if (user.role === Roles.Admin) {
console.log("This user is an admin");
}
Ini jauh lebih mudah dibaca daripada:
if (user.role === 0) {
console.log("This user is an admin");
}
Bayangkan programmer lain membaca:
if (user.role === 0)
Dia mungkin bertanya:
“Angka 0 ini maksudnya apa?”
Tetapi:
if (user.role === Roles.Admin)
langsung jelas:
“Oh, kita sedang mengecek apakah user adalah admin.”
Inilah salah satu keuntungan utama enum: readability.
11. Enum memberikan nama pada nilai
Ini inti dari konsep enum.
Tanpa enum:
0
1
2
3
Kita harus mengingat:
0 = Admin
1 = ReadOnly
2 = WriteOnly
3 = ReadWrite
Dengan enum:
Roles.Admin
Roles.ReadOnly
Roles.WriteOnly
Roles.ReadWrite
kita bekerja menggunakan nama yang bermakna.
Jadi:
Enum memberikan nama yang lebih jelas kepada sekumpulan nilai.
12. Bisa menentukan nilai secara manual
Default-nya:
enum Roles {
Admin,
ReadOnly,
WriteOnly,
ReadWrite
}
menghasilkan:
Admin = 0
ReadOnly = 1
WriteOnly = 2
ReadWrite = 3
Tetapi kita bisa menentukan nilai awal sendiri.
Misalnya:
enum Roles {
Admin = 1,
ReadOnly,
WriteOnly,
ReadWrite
}
Maka:
Admin = 1
ReadOnly = 2
WriteOnly = 3
ReadWrite = 4
Karena setelah Admin = 1, member berikutnya melanjutkan dari angka sebelumnya.
13. Bisa menentukan beberapa nilai sekaligus
Misalnya:
enum Roles {
Admin = 100,
ReadOnly = 200,
WriteOnly = 300,
ReadWrite
}
Maka:
Admin = 100
ReadOnly = 200
WriteOnly = 300
ReadWrite = 301
Kenapa ReadWrite = 301?
Karena dia tidak diberikan nilai secara eksplisit.
TypeScript melanjutkan:
300 + 1 = 301
Jadi aturan sederhananya:
Kalau nilai enum tidak ditentukan, TypeScript akan melanjutkan dari nilai numerik sebelumnya.
14. Tidak harus selalu angka
Lecture juga menunjukkan bahwa enum dapat menggunakan string value.
Contoh:
enum Roles {
Admin = "admin",
ReadOnly = "read-only",
WriteOnly = "write-only",
ReadWrite = "read-write"
}
Sekarang:
Roles.Admin
menghasilkan:
"admin"
dan:
Roles.ReadOnly
menghasilkan:
"read-only"
Ini disebut string enum.
15. Bisa mencampur string dan number?
Dalam lecture juga ditunjukkan bahwa enum dapat memiliki campuran nilai string dan number.
Misalnya secara konsep:
enum Example {
A = 1,
B = "hello"
}
Namun untuk pembelajaran dan praktik sehari-hari, biasanya lebih baik menjaga enum tetap konsisten agar lebih mudah dipahami.
Contohnya pilih salah satu:
enum Roles {
Admin,
ReadOnly,
WriteOnly,
ReadWrite
}
atau:
enum Roles {
Admin = "admin",
ReadOnly = "read-only",
WriteOnly = "write-only",
ReadWrite = "read-write"
}
16. Enum vs array
Sekilas mungkin terlihat mirip dengan array.
Array:
const roles = [
"admin",
"readOnly",
"writeOnly",
"readWrite"
];
Tetapi array adalah kumpulan data.
Kita mengaksesnya berdasarkan index:
roles[0]
roles[1]
roles[2]
roles[3]
Sedangkan enum menggunakan nama:
Roles.Admin
Roles.ReadOnly
Roles.WriteOnly
Roles.ReadWrite
Perbedaannya:
| Array | Enum |
|---|---|
| Kumpulan data | Kumpulan named values |
| Akses dengan index | Akses dengan nama |
roles[0] | Roles.Admin |
| Sangat fleksibel | Cocok untuk pilihan yang sudah ditentukan |
17. Enum vs object
Kita juga bisa membuat:
const Roles = {
Admin: 0,
ReadOnly: 1,
WriteOnly: 2,
ReadWrite: 3
};
Kemudian:
Roles.Admin
Ini memang terlihat mirip.
Tetapi enum memiliki perlakuan khusus dari TypeScript dan compiler.
Lecture menekankan bahwa enum adalah fitur TypeScript yang kemudian akan dikompilasi menjadi JavaScript.
18. Bagaimana enum bisa bekerja di JavaScript?
Ini pertanyaan penting karena:
JavaScript tidak mempunyai
enumseperti TypeScript.
Misalnya kita menulis TypeScript:
enum Roles {
Admin,
ReadOnly,
WriteOnly,
ReadWrite
}
Browser tidak memahami syntax enum TypeScript tersebut dengan cara yang sama.
Maka TypeScript compiler akan mengubahnya menjadi JavaScript.
19. TypeScript → JavaScript
Ingat pembahasan kita sebelumnya:
TypeScript
↓
TypeScript Compiler
↓
JavaScript
↓
Browser / Node.js
Contohnya kita menulis:
enum Roles {
Admin,
ReadOnly,
WriteOnly,
ReadWrite
}
Kemudian TypeScript akan menghasilkan JavaScript yang merepresentasikan enum tersebut.
Salah satu bentuk hasil compile-nya menggunakan IIFE.
IIFE adalah:
Immediately Invoked Function Expression
Secara sederhana:
(function () {
// kode
})();
Artinya function tersebut dibuat sekaligus langsung dijalankan.
20. Kenapa hasil compile enum terlihat rumit?
Karena TypeScript harus membuat mekanisme JavaScript untuk merepresentasikan enum.
Kita sebagai developer cukup menulis:
enum Roles {
Admin,
ReadOnly,
WriteOnly,
ReadWrite
}
Tetapi compiler perlu menghasilkan JavaScript yang memungkinkan kita melakukan:
Roles.Admin
Roles.ReadOnly
dan sebagainya.
Jadi jangan kaget kalau hasil .js terlihat jauh lebih panjang daripada kode .ts.
Tujuan TypeScript adalah membuat kita menulis kode yang lebih nyaman dan aman, lalu compiler yang menangani transformasinya.
21. Hal yang perlu diperhatikan: enum runtime
Ada satu konsep penting yang bisa kita ambil dari hasil compile tersebut.
Enum bukan sekadar informasi untuk compiler.
Enum juga menghasilkan sesuatu pada runtime.
Misalnya:
enum Roles {
Admin,
ReadOnly
}
kemudian:
console.log(Roles.Admin);
akan menghasilkan:
0
Jadi enum numeric benar-benar memiliki representasi ketika program berjalan.
Ini berbeda dengan beberapa fitur TypeScript lain yang hanya digunakan saat proses type checking dan hilang ketika compile.
22. Contoh lengkap
Mari kita satukan semuanya:
enum Roles {
Admin,
ReadOnly,
WriteOnly,
ReadWrite
}
const user = {
name: "John",
age: 30,
gender: "male",
role: Roles.Admin
};
if (user.role === Roles.Admin) {
console.log("This user is an admin");
}
Alurnya:
Step 1
Kita membuat enum:
enum Roles {
Admin,
ReadOnly,
WriteOnly,
ReadWrite
}
Nilainya:
Admin = 0
ReadOnly = 1
WriteOnly = 2
ReadWrite = 3
Step 2
User diberikan role:
role: Roles.Admin
Berarti:
role = 0
Step 3
Kita mengecek:
user.role === Roles.Admin
Artinya:
0 === 0
hasilnya:
true
Step 4
Maka:
console.log("This user is an admin");
dijalankan.
23. Kenapa enum membuat kode lebih readable?
Bandingkan dua kode berikut.
Tanpa enum
if (user.role === 0) {
console.log("Admin");
}
Kita harus tahu:
0itu role apa?
Dengan enum
if (user.role === Roles.Admin) {
console.log("Admin");
}
Langsung terlihat:
User sedang dicek apakah memiliki role
Admin.
Ini sangat berguna ketika aplikasi semakin besar.
24. Analogi sederhana
Bayangkan ada mesin minuman.
Mesin tersebut punya pilihan:
1 = Coffee
2 = Tea
3 = Juice
4 = Water
Tanpa nama, kita hanya punya:
1
2
3
4
Kita harus mengingat:
1 → Coffee
2 → Tea
3 → Juice
4 → Water
Dengan konsep seperti enum:
enum Drink {
Coffee,
Tea,
Juice,
Water
}
kita bisa menggunakan:
Drink.Coffee
Drink.Tea
Drink.Juice
Drink.Water
Jauh lebih jelas daripada:
0
1
2
3
25. Enum sangat cocok untuk pilihan yang terbatas
Misalnya:
User role
enum Roles {
Admin,
User,
Guest
}
Status order
enum OrderStatus {
Pending,
Processing,
Shipped,
Delivered,
Cancelled
}
Level user
enum Level {
Beginner,
Intermediate,
Advanced
}
Payment status
enum PaymentStatus {
Pending,
Paid,
Failed
}
Semua mempunyai karakteristik yang sama:
Pilihannya sudah diketahui dan terbatas.
26. Hubungannya dengan materi sebelumnya
Ini penting supaya materi TypeScript tidak terasa terpisah-pisah.
Sebelumnya kita belajar type annotation:
let age: number = 20;
Kita memberi tahu TypeScript:
ageharus berupa number.
Sekarang enum memberi kita kumpulan pilihan yang sudah diberi nama:
enum Roles {
Admin,
ReadOnly,
WriteOnly,
ReadWrite
}
Kemudian kita bisa menggunakannya dalam type.
Misalnya:
let role: Roles = Roles.Admin;
Artinya:
Variable
rolemenggunakan enumRoles.
27. Enum dan object user
Kita juga bisa membuat type object:
enum Roles {
Admin,
ReadOnly,
WriteOnly,
ReadWrite
}
let user: {
name: string;
age: number;
role: Roles;
} = {
name: "John",
age: 30,
role: Roles.Admin
};
Sekarang bagian:
role: Roles
memberitahu TypeScript bahwa role tersebut berkaitan dengan enum Roles.
Dan value-nya:
role: Roles.Admin
28. Bedakan Roles dan Roles.Admin
Ini sering membingungkan pemula.
Perhatikan:
enum Roles {
Admin,
ReadOnly,
WriteOnly,
ReadWrite
}
Roles adalah enum-nya.
Sedangkan:
Roles.Admin
adalah member/value tertentu dari enum tersebut.
Analogi:
Roles
├── Admin
├── ReadOnly
├── WriteOnly
└── ReadWrite
Jadi:
Roles
→ kumpulan role.
Roles.Admin
→ role Admin.
29. Kesalahan yang sering dilakukan pemula
❌ Salah memahami enum sebagai string
enum Roles {
Admin,
ReadOnly
}
Admin di sini bukan string "Admin".
Secara default:
Roles.Admin
adalah:
0
Kalau ingin string:
enum Roles {
Admin = "admin",
ReadOnly = "readOnly"
}
❌ Mengira dimulai dari 1
enum Roles {
Admin,
ReadOnly,
WriteOnly
}
bukan:
Admin = 1
ReadOnly = 2
WriteOnly = 3
melainkan:
Admin = 0
ReadOnly = 1
WriteOnly = 2
❌ Menggunakan angka langsung
Sebaiknya jangan menulis:
if (user.role === 0)
jika 0 sebenarnya berarti admin.
Lebih readable:
if (user.role === Roles.Admin)
30. Kapan sebaiknya menggunakan enum?
Gunakan enum ketika kamu memiliki sekumpulan pilihan yang jelas dan terbatas.
Misalnya:
Role
- Admin
- User
- Guest
atau:
Status
- Pending
- Success
- Failed
atau:
Direction
- Up
- Down
- Left
- Right
Enum membantu membuat pilihan tersebut menjadi named values.
31. Ringkasan paling penting
Kalau harus mengingat materi ini dalam beberapa poin saja:
1. enum adalah kumpulan named values
enum Roles {
Admin,
ReadOnly,
WriteOnly,
ReadWrite
}
2. Default numeric enum dimulai dari 0
Admin = 0
ReadOnly = 1
WriteOnly = 2
ReadWrite = 3
3. Kita mengakses member menggunakan .
Roles.Admin
Roles.ReadOnly
4. Enum membuat kode lebih readable
Daripada:
if (user.role === 0)
lebih jelas:
if (user.role === Roles.Admin)
5. Nilai enum bisa ditentukan sendiri
enum Roles {
Admin = 100,
ReadOnly = 200,
WriteOnly = 300
}
6. Enum juga bisa menggunakan string
enum Roles {
Admin = "admin",
ReadOnly = "readOnly"
}
7. TypeScript akan meng-compile enum menjadi JavaScript
JavaScript tidak mempunyai fitur enum TypeScript tersebut secara langsung, sehingga TypeScript compiler menghasilkan kode JavaScript untuk merepresentasikan enum.
32. Gambaran besarnya
Kalau kita hubungkan dengan materi yang sudah kamu pelajari:
TypeScript
│
├── Basic Types
│ ├── string
│ ├── number
│ └── boolean
│
├── Type Annotation
│ └── let age: number
│
├── Type Inference
│ └── let age = 20
│
├── Object
│ └── { name: string; age: number }
│
├── Tuple
│ └── [number, string, boolean]
│
└── Enum
└── kumpulan named values
Jadi kalau tuple fokus pada:
“Setiap posisi memiliki tipe tertentu.”
maka enum fokus pada:
“Saya mempunyai sekumpulan pilihan yang sudah diberi nama.”
Contohnya:
// Tuple
let employee: [number, string, number] = [
123,
"John",
2000
];
vs:
// Enum
enum Roles {
Admin,
ReadOnly,
WriteOnly,
ReadWrite
}
Tuple = struktur berdasarkan posisi. Enum = pilihan berdasarkan nama.
Itu inti konsep enum yang perlu kamu kuasai sebelum masuk ke penggunaan enum dalam project nyata.