TypeScript Academy · Pelajaran

Mempersempit Berdasarkan Diskriminan

Biarkan TypeScript mempersempit varian dalam pernyataan switch.

Mempersempit Berdasarkan Diskriminan adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.

Mempersempit Berdasarkan Pembeda

Setelah Anda memeriksa pembeda, TypeScript mempersempit gabungan menjadi anggota yang cocok dan membuka akses ke properti khususnya. Inilah manfaat utama pola tersebut.

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

function area(s: Shape) {
  if (s.kind === "circle") return Math.PI * s.radius ** 2;
  return s.side ** 2;
}
console.log(area({ kind: "circle", radius: 2 }).toFixed(2));

Menggunakan Switch pada Pembeda

switch pada pembeda adalah cara paling rapi untuk menangani setiap varian. Di dalam setiap case, tipe akan dipersempit secara otomatis.

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

function area(s: Shape): number {
  switch (s.kind) {
    case "circle": return Math.PI * s.radius ** 2;
    case "square": return s.side ** 2;
  }
}
console.log(area({ kind: "square", side: 5 }));

Properti Khusus Anggota di Setiap Kasus

Dalam kasus "circle", s.radius tersedia, tetapi s.side tidak. TypeScript mengetahui dengan tepat anggota yang sedang Anda tangani.

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

function describe(s: Shape) {
  switch (s.kind) {
    case "circle": return "r=" + s.radius;
    case "square": return "side=" + s.side;
  }
}
console.log(describe({ kind: "circle", radius: 9 }));

Penyempitan Berbasis If

Anda tidak harus menggunakan switch. Perbandingan sederhana pada pembeda dengan if juga mempersempit tipe dengan sama efektifnya.

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

function perimeter(s: Shape): number {
  if (s.kind === "circle") {
    return 2 * Math.PI * s.radius;
  }
  return 4 * s.side;
}
console.log(perimeter({ kind: "square", side: 3 }));

Mengakses Properti yang Salah Menyebabkan Kesalahan

Sebelum melakukan penyempitan, Anda tidak dapat mengakses properti khusus anggota. TypeScript melaporkan kesalahan karena properti tersebut tidak ada pada setiap anggota.

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

function broken(s: Shape) {
  // Error: radius does not exist on Square
  // return s.radius;
  return s.kind;
}
console.log(broken({ kind: "square", side: 1 }));

Penyempitan dengan Pembeda Boolean

Untuk gabungan { ok: true } | { ok: false }, pemeriksaan if (r.ok) mempersempit tipe menjadi anggota yang berhasil.

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

function handle(r: Result): string {
  if (r.ok) return "Data: " + r.data;
  return "Error: " + r.error;
}
console.log(handle({ ok: false, error: "boom" }));

Penyempitan dengan Pengembalian Awal

Mengembalikan nilai lebih awal pada salah satu varian mempersempit sisa kode menjadi varian lainnya. Ini adalah cara yang rapi untuk menangani kasus satu per satu.

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

function label(s: Shape): string {
  if (s.kind === "circle") return "circle";
  // s is now narrowed to Square here
  return "square with side " + s.side;
}
console.log(label({ kind: "square", side: 8 }));

Menggabungkan dengan Kondisi Lain

Anda dapat menggabungkan pemeriksaan pembeda dengan logika lain. TypeScript mempertahankan penyempitan selama kondisi pembeda tetap benar di cabang tersebut.

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

function bigCircle(s: Shape): boolean {
  return s.kind === "circle" && s.radius > 100;
}
console.log(bigCircle({ kind: "circle", radius: 150 }));

Penyempitan dalam Penyaring Larik

Penyempitan juga berfungsi di dalam fungsi panggilan balik. Di sini setiap bentuk diperiksa secara terpisah saat kita melakukan iterasi.

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

const shapes: Shape[] = [
  { kind: "circle", radius: 1 },
  { kind: "square", side: 2 }
];
shapes.forEach(s => {
  if (s.kind === "circle") console.log("c", s.radius);
  else console.log("s", s.side);
});

Pengembalian Switch Tetap Aman bagi Tipe

Saat sebuah switch menangani setiap kasus dan mengembalikan nilai, TypeScript menyimpulkan tipe pengembalian yang tepat dari gabungan seluruh hasil kasus.

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

function tag(s: Shape) {
  switch (s.kind) {
    case "circle": return s.radius;
    case "square": return s.side;
  }
}
console.log(tag({ kind: "circle", radius: 4 }));

Menggabungkan Penyempitan

Baik Anda menggunakan switch maupun if, pemeriksaan pembeda membuat properti anggota dapat diakses dengan aman. Berikutnya kita akan memastikan setiap kasus ditangani.

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

function area(s: Shape): number {
  return s.kind === "circle" ? Math.PI * s.radius ** 2 : s.side ** 2;
}
console.log(Math.round(area({ kind: "circle", radius: 10 })));

Pemeriksaan Singkat: Penyempitan

Uji pemahaman Anda tentang penyempitan berdasarkan pembeda.

Rangkuman: Mempersempit Berdasarkan Pembeda

Anda telah melihat bahwa pemeriksaan pembeda dengan switch atau if mempersempit gabungan menjadi satu anggota dan hanya menampilkan properti anggota tersebut. Pengembalian awal dan kondisi gabungan juga mempertahankan penyempitan.

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

const s: Shape = { kind: "square", side: 7 };
console.log(s.kind === "square" ? s.side : 0);

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Mempersempit Berdasarkan Diskriminan” gratis?

Ya — teks lengkap “Mempersempit Berdasarkan Diskriminan” 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 “Mempersempit Berdasarkan Diskriminan”?

Biarkan TypeScript mempersempit varian dalam pernyataan switch. 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 2 dari 4.

Berapa lama pelajaran “Mempersempit Berdasarkan Diskriminan” 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