TypeScript Academy · Pelajaran

Tipe Union: A atau B

Gunakan | untuk mengizinkan beberapa kemungkinan tipe.

Pelajaran 1 dari 413 langkah

Tipe Union: A atau B 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.

Selamat Datang

Tipe gabungan memungkinkan sebuah nilai memiliki salah satu dari beberapa tipe. Tipe ini ditulis menggunakan operator `|` dan sangat penting untuk memodelkan data dunia nyata.

Sintaksis Dasar Tipe Gabungan

Gabungkan dua tipe atau lebih dengan `|`. Variabel dengan tipe gabungan dapat menyimpan salah satu tipe yang tercantum.
let id: string | number;
id = 'abc123'; // OK
id = 42;       // OK
// id = true;  // Error

Gabungan dalam Parameter Fungsi

Terima beberapa tipe input dalam fungsi menggunakan tipe parameter gabungan.
function format(val: string | number): string {
  return typeof val === 'string' ? val.toUpperCase() : val.toFixed(2);
}

Penyempitan Diperlukan untuk Anggota Gabungan

Anda hanya dapat memanggil metode yang sama-sama dimiliki semua anggota gabungan tanpa penyempitan. Untuk metode khusus tipe, Anda harus melakukan penyempitan terlebih dahulu.
function process(val: string | number) {
  // val.toFixed(2); // Error — not on string
  if (typeof val === 'number') {
    val.toFixed(2); // OK
  }
}

Gabungan dengan Tipe Literal

Tipe gabungan dari nilai literal membuat sekumpulan nilai string atau angka yang diizinkan, seperti enumerasi.
type Direction = 'north' | 'south' | 'east' | 'west';
type StatusCode = 200 | 201 | 400 | 404 | 500;

Gabungan untuk Tipe yang Dapat Bernilai Null

Gabungan yang paling umum adalah `T | null` atau `T | undefined` untuk merepresentasikan nilai opsional saat strictNullChecks aktif.
function getUser(id: number): User | null {
  return db.find(u => u.id === id) ?? null;
}

Gabungan Tipe Objek

Tipe gabungan dapat menggabungkan tipe objek. TypeScript hanya mengizinkan akses ke properti yang sama-sama dimiliki semua anggota tanpa penyempitan.
type Cat = { kind: 'cat'; meow(): void };
type Dog = { kind: 'dog'; bark(): void };
type Pet = Cat | Dog;
function speak(pet: Pet) {
  if (pet.kind === 'cat') pet.meow();
  else pet.bark();
}

Tiga Tipe atau Lebih dalam Gabungan

Tipe gabungan dapat mencakup sebanyak mungkin tipe yang diperlukan.
type Input = string | number | boolean | null;

Gabungan dalam Tipe Pengembalian

Fungsi dapat mengembalikan tipe yang berbeda bergantung pada logikanya. Nyatakan hal ini dengan tipe pengembalian gabungan.
function divide(a: number, b: number): number | null {
  if (b === 0) return null;
  return a / b;
}

Gabungan dengan Pembeda

Tambahkan properti literal bersama sebagai pembeda pada anggota gabungan. TypeScript menggunakan pembeda ini untuk menyempitkan tipe secara otomatis.
type Square = { kind: 'square'; side: number };
type Circle = { kind: 'circle'; radius: number };
type Shape = Square | Circle;

Properti Bersama Tanpa Penyempitan

Jika semua anggota gabungan memiliki suatu properti, Anda dapat mengaksesnya tanpa penyempitan.
type A = { name: string; x: number };
type B = { name: string; y: number };
type AB = A | B;
function getName(obj: AB): string {
  return obj.name; // OK — name is on both
}

Pemeriksaan Cepat

Sintaks apa yang membuat tipe gabungan yang dapat berupa teks atau angka?

Ringkasan

Tipe gabungan (`|`) memungkinkan nilai dari beberapa tipe. Sempitkan gabungan sebelum menggunakan operasi khusus tipe. Tipe gabungan literal membatasi nilai pada sekumpulan nilai yang terbatas. Gabungan dengan pembeda menambahkan tag bersama agar penyempitan lebih mudah.
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 “Tipe Union: A atau B” gratis?

Ya — teks lengkap “Tipe Union: A atau B” 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 “Tipe Union: A atau B”?

Gunakan | untuk mengizinkan beberapa kemungkinan 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 1 dari 4.

Berapa lama pelajaran “Tipe Union: A atau B” 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