TypeScript Academy · Pelajaran

Union Terbedakan untuk Pencocokan Pola yang Aman

Tambahkan bidang literal umum ke anggota union untuk menjaga keamanan tipe.

Pelajaran 3 dari 413 langkah

Union Terbedakan untuk Pencocokan Pola yang Aman adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.

Selamat Datang

Gabungan dengan pembeda menambahkan properti literal bersama pada anggota gabungan. TypeScript menggunakan pembeda ini untuk menyempitkan tipe dalam pernyataan switch dan if.

Properti Pembeda

Pembeda adalah properti dengan tipe literal unik pada setiap anggota gabungan. TypeScript menyempitkan gabungan berdasarkan nilainya.
type Circle = { kind: 'circle'; radius: number };
type Square = { kind: 'square'; side: number };
type Shape = Circle | Square;

Penyempitan dengan Pemeriksaan if

Periksa pembeda dalam pernyataan if. TypeScript menyempitkan tipe menjadi anggota yang cocok.
function area(shape: Shape): number {
  if (shape.kind === 'circle') {
    return Math.PI * shape.radius ** 2;
  }
  return shape.side ** 2; // narrowed to Square
}

Penyempitan dengan switch/case

Pernyataan switch bekerja sangat baik dengan gabungan yang memiliki pembeda. Setiap case menyempitkan tipe menjadi anggota tertentu.
function describe(shape: Shape): string {
  switch (shape.kind) {
    case 'circle': return `Circle r=${shape.radius}`;
    case 'square': return `Square s=${shape.side}`;
  }
}

Kelengkapan Kasus dengan Tipe Mustahil

Tambahkan case default yang menetapkan nilai ke `never`. Jika Anda menambahkan anggota gabungan baru dan lupa menanganinya, TypeScript akan melaporkan kesalahan.
function area(shape: Shape): number {
  switch (shape.kind) {
    case 'circle': return Math.PI * shape.radius ** 2;
    case 'square': return shape.side ** 2;
    default:
      const _exhaustive: never = shape;
      throw new Error('Unhandled shape');
  }
}

Pola Hasil

Gabungan dengan pembeda sangat cocok untuk pola hasil—mengembalikan data keberhasilan atau kesalahan tanpa melemparkan kesalahan.
type Ok<T> = { ok: true; value: T };
type Err = { ok: false; error: string };
type Result<T> = Ok<T> | Err;

Pola Tipe Tindakan (Gaya Redux)

Dalam Redux dan sistem serupa, tindakan merupakan gabungan dengan pembeda. Kolom `type` adalah pembeda tersebut.
type Action =
  | { type: 'INCREMENT'; amount: number }
  | { type: 'DECREMENT'; amount: number }
  | { type: 'RESET' };

Beberapa Properti Pembeda

Pembeda tidak harus berupa satu properti—TypeScript dapat menyempitkan tipe berdasarkan kombinasi pemeriksaan apa pun.
type AdminUser = { role: 'admin'; permissions: string[] };
type RegularUser = { role: 'user'; credits: number };
type User = AdminUser | RegularUser;

Gabungan Tanpa Pembeda Tetap Dapat Disempitkan

Bahkan tanpa pembeda, TypeScript menyempitkan gabungan menggunakan pemeriksaan typeof, instanceof, dan properti.
type StringOrArr = string | string[];
function flatten(val: StringOrArr): string[] {
  return Array.isArray(val) ? val : [val];
}

Gabungan dengan Pembeda vs Hierarki Kelas

Gabungan dengan pembeda merupakan alternatif fungsional terhadap pewarisan kelas untuk memodelkan berbagai varian. Gabungan ini lebih sederhana, dapat diserialisasi, dan bekerja dengan baik bersama pencocokan pola.

Dunia Nyata: Gabungan Respons HTTP

Modelkan berbagai status respons API sebagai gabungan dengan pembeda.
type ApiState<T> =
  | { status: 'loading' }
  | { status: 'success'; data: T }
  | { status: 'error'; message: string };

Pemeriksaan Cepat

Apa yang harus dimiliki setiap anggota gabungan dengan pembeda agar TypeScript dapat menyempitkan tipe dengan benar?

Ringkasan

Gabungan dengan pembeda menggunakan properti literal bersama sebagai pembeda. Lakukan penyempitan dengan switch/case dan tambahkan pemeriksaan kelengkapan menggunakan `never` untuk menemukan kasus yang belum ditangani. Gabungan ini ideal untuk mesin status, tindakan, dan respons API.
Gratis untuk memulai

Belajar TypeScript dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus
101
Pelajaran
352

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Union Terbedakan untuk Pencocokan Pola yang Aman” gratis?

Ya — teks lengkap “Union Terbedakan untuk Pencocokan Pola yang Aman” 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 “Union Terbedakan untuk Pencocokan Pola yang Aman”?

Tambahkan bidang literal umum ke anggota union untuk menjaga keamanan tipe. 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 3 dari 4.

Berapa lama pelajaran “Union Terbedakan untuk Pencocokan Pola yang Aman” 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

  1. Tipe Union: A atau B
  2. Tipe Intersection: A dan B
  3. Union Terbedakan untuk Pencocokan Pola yang Aman
  4. Pola Praktis dengan Union dan Intersection
← Kembali ke TypeScript Academy