Union dan Intersection

Union: Salah Satu dari Beberapa Tipe

Tanda | artinya "boleh tipe ini ATAU itu":

function formatId(id: string | number): string {
  return `ID-${id}`;
}

formatId(123);     // ok
formatId("A-123"); // ok
formatId(true);    // Error: boolean tidak termasuk union

Union adalah cara TypeScript memodelkan data dunia nyata yang memang bervariasi, seperti response API yang kadang string kadang number.

Tapi Akses Properti Harus Aman

function cetakPanjang(x: string | number) {
  console.log(x.length);
  // Error: Property 'length' does not exist on type 'number'.
}

Compiler melarang akses properti yang tidak ada di SEMUA anggota union. Kamu harus menyempitkan dulu (narrowing, modul 17):

function cetakPanjang(x: string | number) {
  if (typeof x === "string") {
    console.log(x.length); // ok, di sini x pasti string
  }
}

Intersection: Gabungan Semua Tipe

Tanda & artinya "harus memenuhi SEMUA tipe sekaligus":

type Bernama = { nama: string };
type Berumur = { umur: number };
type Pengguna = Bernama & Berumur; // { nama: string; umur: number }

Berguna untuk menggabungkan beberapa kontrak kecil jadi satu, misalnya menggabungkan tipe dasar dengan tipe tambahan dari mixin.

Discriminated Union: Pola Paling Berguna

type Hasil =
  | { status: "sukses"; data: string }
  | { status: "gagal"; error: string };

function tangani(r: Hasil) {
  if (r.status === "sukses") {
    console.log(r.data);  // ok
  } else {
    console.log(r.error); // ok
  }
}

Properti pembeda (status) membuat narrowing otomatis dan exhaustive. Pola ini ideal untuk state loading/success/error di UI.

Catatan teknis: Union yang terlalu lebar (misalnya any tercampur) membuat narrowing tidak berguna karena any menelan semuanya. Jaga union tetap spesifik. Kalau butuh "tipe apa pun tapi tetap aman", pertimbangkan unknown lalu narrowing eksplisit.