Union Diskriminatif untuk Varian Komponen
Modelkan prop varian dengan union diskriminatif agar TypeScript memaksakan kombinasi prop yang valid.
Union Diskriminatif untuk Varian Komponen adalah pelajaran React 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 React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 4 pelajaran total.
Masalah pada Properti Varian
Komponen dengan properti opsional untuk berbagai mode (misalnya, tombol yang dapat berupa tautan atau tombol) dapat memiliki kombinasi properti yang tidak valid. TypeScript tidak dapat mendeteksinya tanpa gabungan berpembeda.
Apa Itu Gabungan Berpembeda
Gabungan berpembeda adalah gabungan tipe yang memiliki bidang tipe literal bersama (pembeda). TypeScript mempersempit tipe berdasarkan nilai bidang tersebut.
type Shape =
| { kind: 'circle'; radius: number }
| { kind: 'rectangle'; width: number; height: number };
function area(shape: Shape): number {
if (shape.kind === 'circle') return Math.PI * shape.radius ** 2;
return shape.width * shape.height; // TS knows width/height exist here
}Varian Tombol vs Tautan
Modelkan komponen polimorfik dengan gabungan berpembeda pada bidang as atau variant untuk memastikan properti yang benar pada setiap kasus.
type ButtonProps =
| { as: 'button'; onClick: () => void; disabled?: boolean; children: React.ReactNode }
| { as: 'a'; href: string; target?: string; children: React.ReactNode };
function ActionButton(props: ButtonProps) {
if (props.as === 'button') {
return <button onClick={props.onClick} disabled={props.disabled}>{props.children}</button>;
}
return <a href={props.href} target={props.target}>{props.children}</a>;
}Varian Komponen Peringatan
Modelkan Peringatan dengan data wajib yang berbeda untuk setiap tipe tingkat keparahan.
type AlertProps =
| { type: 'success'; message: string }
| { type: 'error'; message: string; onRetry: () => void }
| { type: 'warning'; message: string; details?: string };
function Alert(props: AlertProps) {
if (props.type === 'error') {
return (
<div className="alert error">
<p>{props.message}</p>
<button onClick={props.onRetry}>Retry</button>
</div>
);
}
return <div className={`alert ${props.type}`}>{props.message}</div>;
}Penyempitan pada Penangan Peristiwa
Gabungan berpembeda juga berfungsi pada data berbasis peristiwa — sangat cocok untuk mesin status atau status berbasis tindakan.
type LoadingState<T> =
| { status: 'idle' }
| { status: 'loading' }
| { status: 'success'; data: T }
| { status: 'error'; error: Error };
function DataView<T>({ state }: { state: LoadingState<T> }) {
if (state.status === 'loading') return <Spinner />;
if (state.status === 'error') return <p>{state.error.message}</p>;
if (state.status === 'success') return <pre>{JSON.stringify(state.data)}</pre>;
return null;
}Pemeriksaan Menyeluruh dengan never
Tambahkan pemeriksaan never pada cabang bawaan untuk mendapatkan kesalahan TypeScript jika anggota gabungan baru ditambahkan tetapi belum ditangani.
function assertNever(x: never): never {
throw new Error('Unhandled case: ' + x);
}
function renderIcon(type: AlertProps['type']) {
switch (type) {
case 'success': return <CheckIcon />;
case 'error': return <XIcon />;
case 'warning': return <WarnIcon />;
default: return assertNever(type); // TS error if a case is missing
}
}Gabungan Berpembeda untuk Respons API
Modelkan bentuk respons API sebagai gabungan berpembeda agar pemanggil dapat menangani jalur sukses dan kesalahan tanpa konversi tipe.
type ApiResult<T> =
| { ok: true; data: T }
| { ok: false; error: string; code: number };
async function fetchUser(id: string): Promise<ApiResult<User>> {
const res = await fetch(`/api/users/${id}`);
if (!res.ok) return { ok: false, error: 'Not found', code: res.status };
return { ok: true, data: await res.json() };
}Penjaga Tipe untuk Penyempitan
Gunakan penjaga tipe khusus untuk mempersempit gabungan dalam skenario yang lebih rumit, ketika pembeda bukan pemeriksaan kesamaan sederhana.
function isSuccess<T>(result: ApiResult<T>): result is { ok: true; data: T } {
return result.ok === true;
}
const result = await fetchUser('1');
if (isSuccess(result)) {
console.log(result.data.name); // TS knows data exists
}Menghindari Tumpukan Properti Opsional
Tanpa gabungan berpembeda, komponen mengumpulkan properti opsional yang hanya valid dalam kombinasi tertentu — membingungkan dan tidak memiliki tipe. Gabungan berpembeda menghilangkan status yang mustahil.
// Bad: optional prop soup — invalid combos allowed:
interface BadProps {
href?: string;
onClick?: () => void;
disabled?: boolean;
}
// Good: only valid combos via discriminated union:
type GoodProps =
| { as: 'a'; href: string }
| { as: 'button'; onClick: () => void; disabled?: boolean };Menggabungkan Gabungan
Gunakan & (irisan) untuk menambahkan properti bersama ke semua anggota gabungan.
type BaseProps = { className?: string; children: React.ReactNode };
type ButtonVariant =
| (BaseProps & { variant: 'primary'; onClick: () => void })
| (BaseProps & { variant: 'link'; href: string });Pembedaan Saat Runtime
React menggunakan pembeda saat runtime untuk merender UI yang tepat. TypeScript menggunakannya saat kompilasi untuk memastikan penggunaan properti yang benar. Kedua lapisan terlindungi.
Pemeriksaan Singkat
Apa yang dimaksud dengan pembeda dalam gabungan berpembeda?
Ringkasan
Gabungan berpembeda memodelkan komponen dengan kumpulan properti yang saling eksklusif melalui bidang pembeda bertipe literal yang sama. Gunakan never pada cabang bawaan untuk pemeriksaan menyeluruh. Gabungan ini menghilangkan kombinasi properti yang tidak valid yang dapat muncul pada properti opsional, sehingga komponen dapat menjelaskan dirinya sendiri dan aman terhadap tipe.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Union Diskriminatif untuk Varian Komponen” gratis?
Ya — teks lengkap “Union Diskriminatif untuk Varian Komponen” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Union Diskriminatif untuk Varian Komponen”?
Modelkan prop varian dengan union diskriminatif agar TypeScript memaksakan kombinasi prop yang valid. Kamu berlatih React 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 React Academy?
Tidak diperlukan pengalaman sebelumnya. React 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 “Union Diskriminatif untuk Varian Komponen” 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 React Academy ini?
Ya. Setiap pelajaran React 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
- Union Diskriminatif untuk Varian Komponen
- Tipe Kondisional & Terpetakan dalam React
- Komponen Polimorfik dengan Prop 'as'
- Formulir Aman Tipe & Kontrak Respons API