TypeScript Academy · Pelajaran

Pola Praktis dengan Union dan Intersection

Terapkan union dan intersection dalam situasi dunia nyata.

Pelajaran 4 dari 413 langkah

Pola Praktis dengan Union dan Intersection 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.

Selamat Datang

Tipe gabungan dan irisan mendukung banyak pola TypeScript di dunia nyata. Pelajaran ini membahas kombinasi praktis yang akan Anda gunakan dalam kode produksi.

Pola Muatan Opsional

Modelkan fungsi atau peristiwa yang mungkin membawa data atau tidak dengan gabungan.
type Event =
  | { type: 'click'; x: number; y: number }
  | { type: 'keypress'; key: string }
  | { type: 'blur' };

Pembangun/Pencampuran dengan Irisan

Gunakan irisan untuk menggabungkan kumpulan fitur menjadi satu tipe.
type Serializable = { serialize(): string };
type Validatable = { validate(): boolean };
type Model = Serializable & Validatable & { id: number };

Gabungan untuk Normalisasi Input

Terima tipe input yang fleksibel dalam fungsi, lalu normalkan menjadi tipe kanonis.
function toArray<T>(val: T | T[]): T[] {
  return Array.isArray(val) ? val : [val];
}

Tipe Bermerek dengan Irisan

Buat tipe yang berbeda dari primitif yang sama menggunakan irisan dengan penanda merek unik.
type UserId = number & { __brand: 'UserId' };
type PostId = number & { __brand: 'PostId' };
// Prevents accidentally mixing IDs

Pola WithOptional

Gunakan irisan dengan Partial untuk membuat tipe dasar yang sebagian propertinya wajib dan sebagian lainnya opsional.
type RequiredFields = { id: number; email: string };
type OptionalFields = Partial<{ name: string; bio: string }>;
type UserUpdate = RequiredFields & OptionalFields;

Properti Komponen Polimorfik

Dalam React, tipe gabungan memungkinkan properti komponen berbeda berdasarkan pembeda.
type ButtonProps =
  | { variant: 'primary'; onClick: () => void }
  | { variant: 'link'; href: string };

Memperluas Tipe Pihak Ketiga

Iris tipe pihak ketiga dengan tambahan yang Anda buat sendiri.
import type { Request } from 'express';
type AuthRequest = Request & { user: User };

Menggabungkan Gabungan dan Irisan

Gabungan dan irisan dapat digabungkan. Tanda kurung mengatur prioritas.
type Admin = { role: 'admin' };
type User = { role: 'user' };
type LoggedIn = { sessionId: string };
type AuthUser = (Admin | User) & LoggedIn;

Penjaga Tipe untuk Anggota Gabungan

Tulis fungsi penjaga tipe yang dapat digunakan kembali untuk menyempitkan gabungan tanpa mengulangi pemeriksaan.
function isAdmin(u: AuthUser): u is Admin & LoggedIn {
  return u.role === 'admin';
}

Perilaku Distributif dalam Irisan

Hukum distributif: A & (B | C) = (A & B) | (A & C). TypeScript menerapkannya secara otomatis.
type Base = { id: number };
type AB = Base & (string | number);
// equivalent to: (Base & string) | (Base & number)

Pemeriksaan Cepat

Pola apa yang membuat tipe berbeda dari `number` untuk mencegah pencampuran ID secara tidak sengaja?

Ringkasan

Tipe gabungan dan irisan dapat digabungkan untuk memodelkan bentuk kompleks di dunia nyata: ID bermerek, perilaku pencampuran, input fleksibel, dan properti komponen dengan pembeda. Kuasai pola-pola ini untuk membuat TypeScript siap produksi.
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 “Pola Praktis dengan Union dan Intersection” gratis?

Ya — teks lengkap “Pola Praktis dengan Union dan Intersection” 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 “Pola Praktis dengan Union dan Intersection”?

Terapkan union dan intersection dalam situasi dunia nyata. 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 “Pola Praktis dengan Union dan Intersection” 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