Membina Kesatuan Terbeza
Tag ahli kesatuan dengan sifat pembeza yang dikongsi.
Membina Kesatuan Terbeza ialah pelajaran TypeScript Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran TypeScript Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus TypeScript Academy merangkumi sejumlah 4 pelajaran.
Apakah Gabungan Diskriminan?
Gabungan diskriminan ialah gabungan jenis objek yang semuanya berkongsi sifat literal sepunya yang dipanggil diskriminan. Tanda sepunya itu membolehkan TypeScript membezakan setiap ahli.
// The shared "kind" property is the discriminant
type Circle = { kind: "circle"; radius: number };
type Square = { kind: "square"; side: number };
type Shape = Circle | Square;Sifat Diskriminan
Diskriminan mestilah jenis literal (seperti "circle"), bukan jenis luas seperti string. Setiap ahli mendapat nilai literal uniknya sendiri.
type Circle = { kind: "circle"; radius: number };
type Square = { kind: "square"; side: number };
const c: Circle = { kind: "circle", radius: 10 };
console.log(c.kind); // "circle"Setiap Ahli Mempunyai Medannya Sendiri
Selain diskriminan sepunya, setiap ahli membawa medan yang hanya bermakna untuk ahli tersebut. Bulatan mempunyai radius; segi empat sama mempunyai side.
type Circle = { kind: "circle"; radius: number };
type Square = { kind: "square"; side: number };
type Rectangle = { kind: "rectangle"; width: number; height: number };
type Shape = Circle | Square | Rectangle;Membina Nilai Gabungan
Apabila Anda membina nilai, TypeScript menyemak bahawa bentuk itu sepadan tepat dengan satu ahli gabungan berdasarkan kind.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
const shapes: Shape[] = [
{ kind: "circle", radius: 5 },
{ kind: "square", side: 4 }
];
console.log(shapes.length); // 2Mengapa Tidak Menggunakan Medan Pilihan Sahaja?
Jenis longgar dengan medan pilihan (radius?, side?) membenarkan gabungan yang tidak sah. Gabungan diskriminan menjadikan keadaan yang tidak sah tidak dapat diwakili.
// Loose and error-prone: nothing stops radius + side together
type BadShape = { radius?: number; side?: number };
const bad: BadShape = { radius: 5, side: 4 }; // nonsense, but allowedNama Diskriminan Terpulang kepada Anda
Tanda ini biasanya dipanggil kind atau type, tetapi apa-apa nama boleh digunakan asalkan setiap ahli menggunakan nama sifat yang sama dengan nilai literal yang berbeza.
type Event =
| { type: "click"; x: number; y: number }
| { type: "scroll"; delta: number };
const e: Event = { type: "click", x: 10, y: 20 };
console.log(e.type); // "click"Membina Pengira Luas Bentuk
Gabungan diskriminan amat berguna apabila setiap variasi memerlukan pengendalian yang berbeza. Di sini kami menyediakan shapes yang akan diproses oleh fungsi luas kemudian.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
const myShapes: Shape[] = [
{ kind: "circle", radius: 3 },
{ kind: "square", side: 6 }
];
console.log("Count:", myShapes.length);Menambah Variasi Ketiga
Gabungan mudah diperluas. Menambah ahli triangle hanya memerlukan perubahan satu baris, dan TypeScript akan menjejakinya di setiap tempat gabungan itu digunakan.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number }
| { kind: "triangle"; base: number; height: number };
const t: Shape = { kind: "triangle", base: 4, height: 8 };
console.log(t.kind);Literal Unik Menghalang Pertindihan
Oleh sebab setiap kind adalah unik, tiada kekeliruan berlaku. Sesuatu nilai ialah tepat satu ahli, bukan dua ahli serentak.
type A = { kind: "a"; value: number };
type B = { kind: "b"; label: string };
type Union = A | B;
function describe(u: Union) {
return u.kind === "a" ? u.value : u.label;
}
console.log(describe({ kind: "b", label: "hi" }));Diskriminan dengan Tanda Boolean
Diskriminan tidak semestinya berupa rentetan. Literal boolean juga boleh digunakan, dan berguna untuk hasil berjaya atau gagal.
type Result =
| { ok: true; data: string }
| { ok: false; error: string };
const r: Result = { ok: true, data: "loaded" };
console.log(r.ok ? r.data : r.error);Gabungan Diskriminan dalam Amalan
Anda kini mempunyai model bentuk yang lengkap. Dalam pelajaran seterusnya, kita akan menyempitkan jenis berdasarkan diskriminan untuk mengakses medan khusus setiap ahli dengan selamat.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
const sample: Shape = { kind: "circle", radius: 7 };
console.log(sample.kind, "ready");Semakan Pantas: Diskriminan
Uji pemahaman Anda tentang gabungan diskriminan.
Imbas Kembali: Membina Gabungan Diskriminan
Anda telah mempelajari bahawa gabungan diskriminan menggabungkan jenis objek yang berkongsi diskriminan literal seperti kind. Setiap ahli membawa medannya sendiri, literal unik menghalang pertindihan dan corak ini menjadikan keadaan yang tidak sah tidak dapat diwakili.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
const done: Shape = { kind: "square", side: 2 };
console.log("Recap complete:", done.kind);
Pelajari TypeScript dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 101
- Pelajaran
- 352
Soalan Lazim
Adakah pelajaran “Membina Kesatuan Terbeza” percuma?
Ya — teks penuh “Membina Kesatuan Terbeza” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus TypeScript Academy, tingkat taraf kepada CoddyKit PRO. Kursus TypeScript Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Membina Kesatuan Terbeza”?
Tag ahli kesatuan dengan sifat pembeza yang dikongsi. Anda berlatih TypeScript Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan TypeScript Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran TypeScript Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.
Berapa lamakah pelajaran “Membina Kesatuan Terbeza” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran TypeScript Academy ini?
Ya. Setiap pelajaran TypeScript Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Membina Kesatuan Terbeza
- Mengecilkan pada Pembeza
- Semakan Kelengkapan dengan never
- Memodelkan Mesin Keadaan