PricingLoginStart free
TypeScript Academy · Pelajaran

Menggabungkan Literal Menjadi Union

Bangun kumpulan nilai terbatas dengan menggabungkan jenis literal.

Pelajaran 4 dari 413 langkah

Menggabungkan Literal Menjadi Union adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 4 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.

Gabungan Tipe Literal

Gabungan literal memodelkan nilai yang harus persis salah satu dari beberapa pilihan yang telah diketahui. Gabungan ini menjadi dasar mesin status, enumerasi, dan API dengan tipe yang tepat.

type Status = 'idle' | 'loading' | 'success' | 'error';

let state: Status = 'idle';
state = 'loading';
console.log('State:', state);

Menggunakan switch pada Gabungan Literal

switch atas gabungan literal mudah dibaca, dan kompilator mengetahui bahwa setiap kasus merupakan salah satu nilai yang diizinkan. Ini sangat cocok dengan pemeriksaan kelengkapan.

type Status = 'idle' | 'loading' | 'done';

function label(s: Status): string {
  switch (s) {
    case 'idle': return 'Waiting';
    case 'loading': return 'Working';
    case 'done': return 'Finished';
  }
}
console.log(label('loading'));

Penanganan Menyeluruh

Menangani setiap anggota gabungan disebut penanganan menyeluruh. Jika semua kasus tercakup, TypeScript dapat membuktikan bahwa fungsi selalu mengembalikan nilai tanpa cabang yang terlewat.

type Dir = 'left' | 'right';

function step(d: Dir): number {
  if (d === 'left') return -1;
  return 1; // only 'right' remains
}
console.log(step('left'), step('right'));

Trik Kelengkapan dengan never

Menetapkan nilai ke never pada cabang default memaksa kesalahan kompilasi jika Anda menambahkan anggota gabungan baru tetapi lupa menanganinya. Ini menjadi pengaman untuk kode yang terus berkembang.

type Shape = 'circle' | 'square';

function area(s: Shape): string {
  switch (s) {
    case 'circle': return 'pi r^2';
    case 'square': return 'a^2';
    default:
      const _exhaustive: never = s;
      return _exhaustive;
  }
}
console.log(area('circle'));

Menurunkan Gabungan dari Objek const

Pola yang umum adalah menyimpan nilai dalam objek const lalu menurunkan gabungan dari nilainya menggunakan typeof obj[keyof typeof obj]. Satu sumber kebenaran, dua keluaran.

const Colors = { Red: 'red', Blue: 'blue' } as const;
type Color = typeof Colors[keyof typeof Colors];
// 'red' | 'blue'
const c: Color = Colors.Blue;
console.log(c);

Menurunkan Gabungan dari Kunci

Anda juga dapat menurunkan gabungan dari kunci menggunakan keyof typeof obj. Ini berguna ketika kuncinya sendiri merupakan pengenal yang bermakna.

const ICONS = { home: 0, search: 1, profile: 2 } as const;
type IconName = keyof typeof ICONS;
// 'home' | 'search' | 'profile'
const name: IconName = 'search';
console.log(name, ICONS[name]);

Gabungan Terbedakan dengan Label Literal

Tambahkan properti label literal pada setiap varian objek, dan TypeScript dapat membedakan varian-varian tersebut. Pemeriksaan label mempersempit tipe menjadi bentuk yang persis.

type Action =
  | { type: 'add'; amount: number }
  | { type: 'reset' };

function reduce(a: Action): number {
  if (a.type === 'add') return a.amount;
  return 0;
}
console.log(reduce({ type: 'add', amount: 5 }));

Mempersempit Berdasarkan Diskriminan

Setelah Anda menguji diskriminan literal, kompilator mengetahui varian yang dimiliki, sehingga bidang uniknya dapat diakses dengan aman tanpa konversi tipe.

type Event =
  | { kind: 'click'; x: number; y: number }
  | { kind: 'key'; code: string };

function handle(e: Event): string {
  if (e.kind === 'key') return 'Key ' + e.code;
  return 'Click ' + e.x + ',' + e.y;
}
console.log(handle({ kind: 'key', code: 'Esc' }));

Menggabungkan Beberapa Gabungan

Anda dapat menyusun gabungan yang lebih besar dari gabungan-gabungan bernama yang lebih kecil. Dengan begitu, pilihan yang berkaitan tetap dikelompokkan dan dapat digunakan kembali di seluruh basis kode Anda.

type Primary = 'red' | 'blue' | 'yellow';
type Secondary = 'green' | 'orange';
type Color = Primary | Secondary;

const c: Color = 'green';
console.log(c);

Gabungan sebagai Batasan Fungsi

Meneruskan gabungan literal ke fungsi membatasi pemanggil agar hanya menggunakan pilihan yang valid dan menyediakan pelengkapan otomatis di editor. Perpaduan keamanan dan kemudahan penemuan ini sulit ditandingi.

type Align = 'left' | 'center' | 'right';

function setAlign(a: Align): void {
  console.log('Aligned', a);
}
setAlign('center');
// setAlign('top'); // Error

Mengapa Gabungan Literal Lebih Baik daripada String

Menggunakan parameter string biasa menerima nilai apa pun, termasuk salah ketik. Gabungan literal menangkap kesalahan saat kompilasi dan mendokumentasikan pilihan yang valid — peningkatan yang jelas untuk kode yang mudah dipelihara.

type Method = 'GET' | 'POST' | 'PUT' | 'DELETE';

function request(m: Method, url: string): void {
  console.log(m, url);
}
request('POST', '/api/users');

Pemeriksaan Singkat

Uji pemahaman Anda tentang gabungan literal.

Jawab di pelajaran interaktif

Ringkasan: Menggabungkan Literal

Anda telah mempelajari cara:

  • Membangun gabungan literal untuk kumpulan pilihan yang terbatas.
  • Menanganinya secara menyeluruh, menggunakan trik never untuk keamanan.
  • Menurunkan gabungan dari objek const melalui keyof typeof dan typeof obj[keyof typeof obj].
  • Membedakan varian dengan properti label literal.

Kursus berikutnya: tipe khusus unknown, never, dan void.

const ROUTES = { home: '/', about: '/about' } as const;
type Route = typeof ROUTES[keyof typeof ROUTES];
const r: Route = '/about';
console.log(r);
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
Mulai belajar gratisLihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menggabungkan Literal Menjadi Union” gratis?

Ya — teks lengkap “Menggabungkan Literal Menjadi Union” 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 “Menggabungkan Literal Menjadi Union”?

Bangun kumpulan nilai terbatas dengan menggabungkan jenis literal. 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 4 dari 4.

Berapa lama pelajaran “Menggabungkan Literal Menjadi Union” 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. Jenis Literal String dan Numerik
  2. Literal Boolean dan Inferensi Literal
  3. Pernyataan const dengan as const
  4. Menggabungkan Literal Menjadi Union
← Kembali ke TypeScript Academy