FluentStack

Union Types

Mode tersedia: dark, light, paper
MasukDaftar
Intermediate · Level 6: TypeScriptIntermediate40 menitBahasa Indonesia

Union Types

Memodelkan value yang hanya boleh memiliki beberapa pilihan tertentu.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Menjelaskan union type sebagai daftar kemungkinan value
  • Memakai string literal union untuk status UI
  • Menghindari string bebas untuk value yang sebenarnya terbatas
TypeScriptUnion TypesUI State

Isi lesson

6 blok
  1. 1.
    Tidak semua string harus bebasBelum selesaiWajib
  2. 2.
    Status UI dengan union typeBelum selesaiWajib
  3. 3.
    Gunakan union saat pilihan sudah jelasBelum selesaiWajib
  4. 4.
    Coding practiceBelum selesaiWajib
  5. 5.
    Cek pemahamanBelum selesaiWajib
  6. 6.
    RingkasanBelum selesaiWajib

Tidak semua string harus bebas

Wajib

Di module sebelumnya, kamu sudah memberi type pada value, object, function, dan optional field. Sekarang kita mulai mendesain type agar data lebih aman dipakai untuk UI.

Union type dipakai saat sebuah value hanya boleh punya beberapa kemungkinan. Contohnya status request: `loading`, `success`, `error`, atau `empty`. Jika status ditulis sebagai string biasa, typo seperti `sucess` bisa lolos. Dengan union type, TypeScript bisa memberi tanda lebih awal.

Bagian ini memengaruhi progres lesson.

Status UI dengan union type

Wajib
ts
type LoadStatus = "idle" | "loading" | "success" | "error";

let status: LoadStatus = "loading";
status = "success";
status = "sucess"; // TypeScript memberi error karena typo.

Union type membatasi value yang boleh dipakai. Ini cocok untuk status, mode, variant, role sederhana, atau pilihan yang memang terbatas.

Bagian ini memengaruhi progres lesson.

Tips

Wajib

Gunakan union saat pilihan sudah jelas

Jika value hanya punya beberapa pilihan yang stabil, union type membuat kode lebih aman. Jika value benar-benar bebas dari user, misalnya isi komentar, string biasa tetap masuk akal.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Model status dengan union type

Latihan membatasi status UI ke beberapa value yang valid.

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.

3 cek otomatis3 checklist
Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Kapan union type paling berguna?

Progres lesson naik setelah jawaban benar.

Ringkasan

Wajib
  • Union type menulis beberapa kemungkinan value dengan tanda `|`.
  • String literal union cocok untuk status UI dan mode sederhana.
  • Union type membantu menangkap typo sebelum runtime.
  • Gunakan union saat pilihan value memang terbatas.
  • Berikutnya, kamu akan belajar narrowing agar TypeScript tahu value mana yang sedang dipakai.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Tidak semua string harus bebas.

Memuat progresReview module