Discriminated Union untuk UI State
Memodelkan loading, error, empty, dan success state dengan object yang lebih aman.
Tujuan belajar
- Membuat UI state dengan discriminated union
- Menggunakan property status sebagai discriminant
- Mencegah state yang tidak masuk akal, seperti success tanpa data
Isi lesson
5 blok- 1.UI state bukan hanya satu stringBelum selesaiWajib
- 2.UI state yang amanBelum selesaiWajib
- 3.Jangan campur semua property dalam satu object besarBelum selesaiWajib
- 4.Coding practiceBelum selesaiWajib
- 5.RingkasanBelum selesaiWajib
UI state bukan hanya satu string
WajibStatus string seperti `loading` atau `success` berguna, tetapi UI sering butuh data tambahan. Saat success, kamu butuh data. Saat error, kamu butuh pesan error. Saat empty, kamu mungkin butuh pesan kosong.
Discriminated union memodelkan setiap state sebagai object. Semua object punya property pembeda yang sama, biasanya `status`. Dari status itu, TypeScript tahu property tambahan apa yang aman dipakai.
Bagian ini memengaruhi progres lesson.
UI state yang aman
Wajibtype LessonListState =
| { status: "loading" }
| { status: "empty"; message: string }
| { status: "error"; message: string }
| { status: "success"; lessons: string[] };
function getStateLabel(state: LessonListState): string {
if (state.status === "success") {
return state.lessons.length + " lesson tersedia";
}
if (state.status === "loading") {
return "Memuat lesson...";
}
return state.message;
}Saat status success, TypeScript tahu state punya lessons. Saat error atau empty, TypeScript tahu state punya message.
Bagian ini memengaruhi progres lesson.
Kesalahan umum
WajibJangan campur semua property dalam satu object besar
State seperti `{ status, data?, error? }` terlihat sederhana, tetapi bisa membuat state tidak masuk akal: status success tanpa data, atau status loading dengan error lama. Discriminated union membuat hubungan status dan data lebih jelas.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususModel UI state dengan discriminated union
Latihan memodelkan loading, empty, error, dan success state secara aman.
Tujuan awal: Fokus di tab TS.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Ringkasan
Wajib- Discriminated union memakai property pembeda yang sama di setiap branch.
- Untuk UI state, property pembeda sering bernama `status`.
- Setiap status bisa punya property tambahan yang sesuai.
- Model ini membuat invalid state lebih sulit ditulis.
- Berikutnya, kamu akan memakai generics untuk membuat type dan helper yang bisa dipakai ulang.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: UI state bukan hanya satu string.