Union & Intersection

Dalam TypeScript, Anda dapat menyusun tipe baru dengan menggabungkan tipe yang sudah ada. Dua cara utama untuk melakukan ini adalah Union Type dan Intersection Type.

Union Type (|)

Tipe union memungkinkan sebuah nilai untuk menjadi salah satu dari beberapa tipe. Anggap saja ini sebagai hubungan “ATAU”.

type ID = string | number;

function cetakId(id: ID) {
  console.log(`ID Anda adalah: ${id}`);
}

cetakId(101);     // OK
cetakId("ABC");   // OK

Narrowing (Penyempitan Tipe)

Saat bekerja dengan tipe union, Anda sering kali perlu melakukan narrowing untuk menjalankan operasi spesifik pada tipe tersebut.

function formatId(id: string | number) {
  if (typeof id === "string") {
    return id.toUpperCase(); // Di blok ini, id adalah 'string'
  }
  return id.toFixed(2); // Di blok ini, id adalah 'number'
}

Intersection Type (&)

Tipe intersection menggabungkan beberapa tipe menjadi satu. Tipe baru tersebut akan memiliki semua properti dari setiap tipe dalam intersection tersebut. Anggap saja ini sebagai hubungan “DAN”.

interface PenangananError {
  success: boolean;
  error?: { message: string };
}

interface DataSeni {
  title: string;
  artist: string;
}

type ArtResponse = DataSeni & PenangananError;

const response: ArtResponse = {
  title: "The Starry Night",
  artist: "Vincent van Gogh",
  success: true
};

Discriminated Union

Pola yang umum dalam TypeScript adalah menggunakan properti “tag” atau “discriminant” untuk membedakan antara tipe-tipe yang berbeda dalam sebuah union.

interface Lingkaran {
  kind: "circle";
  radius: number;
}

interface Persegi {
  kind: "square";
  sisi: number;
}

type Bentuk = Lingkaran | Persegi;

function hitungLuas(bentuk: Bentuk) {
  switch (bentuk.kind) {
    case "circle":
      return Math.PI * bentuk.radius ** 2;
    case "square":
      return bentuk.sisi ** 2;
  }
}

Pola ini sangat membantu untuk menangani state yang kompleks (seperti state API: Loading, Success, Error) dengan cara yang aman secara tipe.