Belajar TypeScript - Union, Intersection, dan Tipe Literal

#Pendahuluan

Tipe primitif di episode 3 adalah bahan mentah. Episode 4 mengajarkan cara menggabungkannya agar mencerminkan data nyata — karena data di dunia nyata jarang bertipe tunggal. Sebuah ID bisa berupa angka atau string, status order bisa satu dari lima kemungkinan, dan sebuah objek bisa merupakan gabungan dari beberapa bentuk.

Tiga konsep yang akan kalian kuasai: union type untuk nilai yang boleh beberapa bentuk, tipe literal untuk mengunci nilai spesifik, dan intersection type untuk menggabungkan bentuk objek. Ketiganya adalah fondasi untuk membangun model domain yang akurat.

#Union Type

#Nilai dengan Beberapa Kemungkinan Bentuk

Union type ditulis dengan operator pipe |:

type Id = string | number;
 
let userId: Id = 123;
userId = "a1b2c3"; // valid, masih bertipe Id
 
function formatId(id: Id): string {
    return String(id);
}

Deklarasi type Id = string | number; berarti sebuah nilai Id boleh berisi string atau angka. Union ini sering dipakai untuk ID dari sumber berbeda, misalnya dari database atau dari parameter URL.

#Memakai Nilai Union dengan Aman

Masalah muncul saat nilai union dipakai: TypeScript tidak mengizinkan operasi yang hanya berlaku untuk salah satu anggotanya. Contohnya, toUpperCase tidak bisa langsung dipanggil pada string | number — compiler tidak tahu bentuk mana yang sedang dipegang.

function sambut(id: Id): string {
    if (typeof id === "string") {
        return id.toUpperCase();
    }
    return `Nomor: ${id}`;
}

Pemeriksaan typeof id === "string" di atas menyempitkan tipe di dalam blok if. Ini disebut type narrowing, dan akan kita bahas tuntas di episode 11.

#Tipe Literal

#Mengunci Nilai Tertentu

Selain membatasi jenis nilai, TypeScript bisa membatasi nilai spesifik:

type Metode = "GET" | "POST" | "PUT" | "DELETE";
type Tahap = "idle" | "loading" | "sukses" | "gagal";
 
let tahap: Tahap = "loading";
tahap = "sukses"; // valid
tahap = "batal";  // error: "batal" tidak ada di union

Tipe Tahap di atas hanya mengizinkan empat string tertentu. Keuntungannya besar: salah mengeja status akan langsung jadi error, bukan bug runtime yang sulit dilacak.

#Union Literal Sebagai Enum yang Ringan

Kombinasi literal dengan union adalah alternatif enum yang paling dianjurkan (detail di episode 6):

type StatusOrder = "baru" | "diproses" | "dikirim" | "selesai" | "dibatalkan";
 
function cekStatus(status: StatusOrder): string {
    return `Order sedang dalam tahap: ${status}`;
}
 
console.log(cekStatus("dikirim"));

#Intersection Type

#Menggabungkan Bentuk Objek

Intersection type ditulis dengan operator & dan mengharuskan nilai memenuhi semua bentuk sekaligus:

type Identitas = {
    nama: string;
};
 
type Karyawan = Identitas & {
    jabatan: string;
    gaji: number;
};
 
const budi: Karyawan = {
    nama: "Budi",
    jabatan: "Engineer",
    gaji: 15_000_000,
};

Variabel budi: Karyawan harus punya semua field dari Identitas dan field tambahan dari deklarasi inline. Intersection paling berguna untuk menggabungkan tipe dari beberapa sumber, misalnya data user dari dua API yang berbeda.

#Union vs Intersection: Kapan Memakainya

Pembeda yang paling mudah diingat:

• Union berarti "salah satu dari": nilai bertipe A | B berbentuk A atau B.
• Intersection berarti "semuanya sekaligus": nilai bertipe A & B berbentuk A dan B sekaligus.

Dalam praktik, union jauh lebih sering dipakai daripada intersection. Union literal untuk status, union untuk nilai yang bisa null, dan discriminated union di episode 11 akan menjadi alat utama kalian. Intersection lebih jarang, tapi tak tergantikan saat menggabungkan tipe objek dari sumber berbeda.

#Penutup

Episode 4 memberi kalian dua operator paling penting dalam mendesain tipe: | untuk pilihan dan & untuk penggabungan, plus tipe literal untuk mengunci nilai. Kalian sekarang bisa memodelkan ID, status, dan objek gabungan dengan akurat.

Inti yang harus dibawa pulang:

• Union string | number berarti nilai boleh salah satu bentuk.
• Tipe literal mengunci nilai spesifik, misalnya "GET" | "POST".
• Literal union adalah alternatif enum yang ringan dan direkomendasikan.
• Intersection A & B menggabungkan properti kedua tipe.
• Narrowing dengan typeof diperlukan sebelum memakai nilai union.
• Union untuk pilihan; intersection untuk penggabungan objek.

Di episode 5 selanjutnya kita akan membahas interface, type alias, dan deklarasi tipe — cara utama menamai dan mendefinisikan bentuk objek yang berulang, plus kapan memilih interface dan kapan memilih type.