Latihan 1 dari materi Enums di TypeScript — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Buat fungsi getStatusLabel yang menerjemahkan status ke label Indonesia.
Di atas fungsinya, daftarkan tiga statusnya sebagai string enum: enum Status { Active = "active", Inactive = "inactive", Pending = "pending" }. Jangan numeric enum: nilainya 0, 1, 2, bukan teks status.
Beri tipe pada parameter dan return-nya: function getStatusLabel(status: Status): string.
Kembalikan labelnya, persis begini:
Status.Active → "Aktif"
Status.Inactive → "Nonaktif"
Status.Pending → "Menunggu"
Yang dicek:
getStatusLabel(Status.Active) mengembalikan "Aktif", getStatusLabel(Status.Inactive) mengembalikan "Nonaktif", dan getStatusLabel(Status.Pending) mengembalikan "Menunggu".
Nilai enum-nya "active", "inactive" dan "pending".
Kodemu memuat enum Status.
TypeScript memeriksa kodemu dulu (mode strict, seperti tsc --noEmit) dan gak menemukan error. Error-nya muncul di console dengan format tsc.
Dua baris uji ini ditaruh sesudah kodemu:
const label: string = getStatusLabel(Status.Pending) harus diterima TypeScript.
getStatusLabel("active") harus ditolak dengan error TS2345. Itulah gunanya string enum: teks biasa gak bisa masuk, walau isinya sama. Union "active" | "inactive" | "pending" menerima teks itu, jadi di latihan ini dia gak lolos.
Hint
Tiga status ditulis sekali sebagai enum, lalu parameter fungsinya memakai enum itu. Isi fungsinya cukup memasangkan tiap anggota enum dengan labelnya.
Tulis enum Status { Active = "active", Inactive = "inactive", Pending = "pending" } lalu function getStatusLabel(status: Status): string { ... }. Di dalamnya cek status === Status.Active dan status === Status.Inactive, sisanya "Menunggu".
enum Status { Active = "active", Inactive = "inactive", Pending = "pending" } function getStatusLabel(status: Status): string { if (status === Status.Active) return "Aktif"; if (status === Status.Inactive) return "Nonaktif"; return "Menunggu"; }
</>{ }.css=>#idfn()
Versi baru
HyperSheets
bagian dari BelajarWeb.dev
0%
Membuka gerbang…
HyperSheets
Memperbarui Aplikasi
Versi baru tersedia. Halaman akan dimuat ulang otomatis...