TypeScript Academy · Pelajaran

Membangun Union Diskriminatif

Beri anggota union properti diskriminan yang sama.

Membangun Union Diskriminatif adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar TypeScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus TypeScript Academy mencakup 4 pelajaran total.

Apa Itu Gabungan Terdiskriminasi

Gabungan terdiskriminasi adalah gabungan tipe objek yang semuanya memiliki properti literal bersama yang disebut pembeda. Label bersama tersebut memungkinkan TypeScript membedakan setiap anggotanya.

// The shared "kind" property is the discriminant
type Circle = { kind: "circle"; radius: number };
type Square = { kind: "square"; side: number };
type Shape = Circle | Square;

Properti Pembeda

Pembeda harus berupa tipe literal (seperti "circle"), bukan tipe yang umum seperti string. Setiap anggota memiliki nilai literal uniknya sendiri.

type Circle = { kind: "circle"; radius: number };
type Square = { kind: "square"; side: number };

const c: Circle = { kind: "circle", radius: 10 };
console.log(c.kind); // "circle"

Setiap Anggota Memiliki Properti Sendiri

Selain pembeda yang sama, setiap anggota membawa properti yang hanya bermakna untuk anggota tersebut. Lingkaran memiliki radius; persegi memiliki side.

type Circle = { kind: "circle"; radius: number };
type Square = { kind: "square"; side: number };
type Rectangle = { kind: "rectangle"; width: number; height: number };
type Shape = Circle | Square | Rectangle;

Membangun Nilai Gabungan

Saat Anda membangun sebuah nilai, TypeScript memeriksa bahwa bentuknya persis cocok dengan satu anggota gabungan berdasarkan kind.

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; side: number };

const shapes: Shape[] = [
  { kind: "circle", radius: 5 },
  { kind: "square", side: 4 }
];
console.log(shapes.length); // 2

Mengapa Tidak Menggunakan Properti Opsional Saja

Tipe longgar dengan properti opsional (radius?, side?) memungkinkan kombinasi yang tidak valid. Gabungan terdiskriminasi membuat keadaan yang tidak sah tidak dapat direpresentasikan.

// Loose and error-prone: nothing stops radius + side together
type BadShape = { radius?: number; side?: number };
const bad: BadShape = { radius: 5, side: 4 }; // nonsense, but allowed

Nama Pembeda Terserah Anda

Label ini biasanya disebut kind atau type, tetapi nama apa pun dapat digunakan selama setiap anggota memakai nama properti yang sama dengan nilai literal yang berbeda.

type Event =
  | { type: "click"; x: number; y: number }
  | { type: "scroll"; delta: number };

const e: Event = { type: "click", x: 10, y: 20 };
console.log(e.type); // "click"

Memodelkan Penghitung Luas Bentuk

Gabungan terdiskriminasi sangat berguna saat setiap varian memerlukan penanganan yang berbeda. Di sini kita menyiapkan bentuk-bentuk yang nantinya akan diproses oleh fungsi luas.

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; side: number };

const myShapes: Shape[] = [
  { kind: "circle", radius: 3 },
  { kind: "square", side: 6 }
];
console.log("Count:", myShapes.length);

Menambahkan Varian Ketiga

Gabungan dapat diperluas. Menambahkan anggota triangle hanya memerlukan perubahan satu baris, dan TypeScript akan melacaknya di setiap tempat gabungan tersebut digunakan.

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; side: number }
  | { kind: "triangle"; base: number; height: number };

const t: Shape = { kind: "triangle", base: 4, height: 8 };
console.log(t.kind);

Literal Unik Mencegah Tumpang Tindih

Karena setiap kind unik, tidak ada ambiguitas. Sebuah nilai hanya merupakan tepat satu anggota, tidak pernah dua anggota sekaligus.

type A = { kind: "a"; value: number };
type B = { kind: "b"; label: string };
type Union = A | B;

function describe(u: Union) {
  return u.kind === "a" ? u.value : u.label;
}
console.log(describe({ kind: "b", label: "hi" }));

Pembeda dengan Label Boolean

Pembeda tidak harus berupa teks. Literal boolean juga dapat digunakan, yang berguna untuk hasil berhasil/gagal.

type Result =
  | { ok: true; data: string }
  | { ok: false; error: string };

const r: Result = { ok: true, data: "loaded" };
console.log(r.ok ? r.data : r.error);

Gabungan Terdiskriminasi dalam Praktik

Sekarang Anda memiliki model bentuk yang lengkap. Pada pelajaran berikutnya, kita akan melakukan penyempitan berdasarkan pembeda agar dapat mengakses properti khusus setiap anggota dengan aman.

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; side: number };

const sample: Shape = { kind: "circle", radius: 7 };
console.log(sample.kind, "ready");

Pemeriksaan Singkat: Pembeda

Uji pemahaman Anda tentang gabungan terdiskriminasi.

Rangkuman: Membangun Gabungan Terdiskriminasi

Anda telah mempelajari bahwa gabungan terdiskriminasi menggabungkan tipe objek yang memiliki pembeda literal seperti kind. Setiap anggota membawa propertinya sendiri, literal unik mencegah tumpang tindih, dan pola ini membuat keadaan yang tidak sah tidak dapat direpresentasikan.

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; side: number };

const done: Shape = { kind: "square", side: 2 };
console.log("Recap complete:", done.kind);

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Membangun Union Diskriminatif” gratis?

Ya — teks lengkap “Membangun Union Diskriminatif” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus TypeScript Academy, upgrade ke CoddyKit PRO. Kursus TypeScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Membangun Union Diskriminatif”?

Beri anggota union properti diskriminan yang sama. Kamu berlatih TypeScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai TypeScript Academy?

Tidak diperlukan pengalaman sebelumnya. TypeScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Membangun Union Diskriminatif” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran TypeScript Academy ini?

Ya. Setiap pelajaran TypeScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke TypeScript Academy