TypeScript - Union Types: A Friendly Introduction for Beginners

Hai sana, bakal bintang pengkomputeran! ? Adakah anda bersedia untuk melantikan ke dunia yang menakjubkan TypeScript dan belajar tentang salah satu ciri yang paling berkuasa? Hari ini, kita akan mengenalpasti Union Types, konsep yang mungkin terdengar menakutkan pada permulaan, tetapi saya berjanji anda akan menemuiinya sangat berguna dan bahkan menyeronokkan sebelum habis panduan ini!

Sebagai guru komputer di lingkungan anda, saya telah melihat banyak pelajar terangsang ketika mereka memahami konsep ini. Jadi, mari kita melantik perjalanan ini bersama, kenapa tidak?

Apa Itu Union Types?

Sebelum kita masuk ke dalam perincian, mari kita mulakan dengan analogi mudah. Bayangkan anda ada kotak ajaib yang boleh menyimpan kereta mainan atau binatang peliharaan, tetapi bukan kedua-duanya pada masa yang sama. Itu adalah jenis apa yang Union Type adalah dalam TypeScript - ia adalah cara untuk memberitahu kod kita bahawa pembolehubah boleh menjadi salah satu jenis beberapa jenis.

Sekarang, mari kita kotor tangan dengan beberapa kod!

Sintaks: Union Literal

Sintaks asas bagi Union Type menggunakan simbol paip (|) untuk memisahkan jenis yang berbeza. Ia seperti memberitahu TypeScript, "Hey, ini boleh ini ATAU itu!"

let myFavorite: string | number;

myFavorite = "TypeScript"; // Ini sah
console.log(myFavorite); // Output: TypeScript

myFavorite = 42; // Ini juga sah
console.log(myFavorite); // Output: 42

// myFavorite = true; // Ini akan menyebabkan ralat

Dalam contoh ini, myFavorite boleh menjadi string atau number. Ia seperti kotak ajaib kami yang boleh menyimpan kata atau nombor, tetapi bukan apa-apa lain. Jika kami cuba memasukkan boolean (seperti true), TypeScript akan mengayunkan tongkat ajaibnya dan menunjukkan ralat kepada kita.

Pembolehubah Union Type

Mari kita luangkan contoh sebelum ini dan lihat bagaimana Union Types boleh membuat kod kita lebih fleksibel:

type Pet = "cat" | "dog" | "fish";
let myPet: Pet;

myPet = "cat"; // Ini sah
console.log(`I have a ${myPet}`); // Output: I have a cat

myPet = "dog"; // Ini juga sah
console.log(`I have a ${myPet}`); // Output: I have a dog

// myPet = "elephant"; // Ini akan menyebabkan ralat

Di sini, kita telah mencipta jenis custom yang dipanggil Pet yang hanya boleh menjadi salah satu daripada tiga string khusus. Ia seperti menjual kedai haiwan peliharaan yang hanya menjual kucing, anjing, dan ikan. Jika anda cuba membeli gajah, maaf, kita tidak boleh!

Union Type dan Parameter Fungsi

Union Types benar-benar bercahaya apabila digunakan bersama fungsi. Mereka membolehkan fungsi anda menjadi lebih berbagai-bagai tanpa mengorbankan keselamatan jenis. Mari kita lihat contoh:

function printId(id: number | string) {
console.log(`Your ID is: ${id}`);
}

printId(101); // Output: Your ID is: 101
printId("202"); // Output: Your ID is: 202

// printId(true); // Ini akan menyebabkan ralat

Dalam fungsi ini, printId boleh menerima nombor atau string sebagai argumen. Ia seperti pembaca kad ID universal yang boleh memproses kedua-dua ID nombor dan teks. Tetapi cuba meletakkan kad ID boolean anda, dan ia akan sopan menolak!

Union Type dan Array

Sekarang, mari kita naik taraf dan lihat bagaimana Union Types bekerja dengan array. Siapkan diri anda untuk sedikit sihir array!

let mixedArray: (number | string)[] = [1, "two", 3, "four", 5];

console.log(mixedArray); // Output: [1, "two", 3, "four", 5]

mixedArray.push(6); // Ini sah
mixedArray.push("seven"); // Ini juga sah

// mixedArray.push(true); // Ini akan menyebabkan ralat

console.log(mixedArray); // Output: [1, "two", 3, "four", 5, 6, "seven"]

Di sini, kita telah mencipta array yang boleh mengandungi kedua-dua nombor dan string. Ia seperti senarai lagu yang boleh termasuk kedua-dua nombor trek dan judul lagu. Tetapi cuba menyusup boolean ke dalamnya, dan TypeScript akan menangkap anda!

Kes penggunaan praktikal

Sekarang, kita telah meliputi asas, mari kita lihat beberapa kes dunia nyata di mana Union Types boleh menyelamatkan hari:

1. Respon API: Pada masa-masa bekerja dengan API, kadang-kadang data yang anda terima boleh berbeza jenis. Union Types membantu anda mengendalikan variasi ini dengan lembut.

type ApiResponse = {
status: "success" | "error";
data: string | number | null;
};

function handleResponse(response: ApiResponse) {
if (response.status === "success") {
console.log(`Success! Data: ${response.data}`);
} else {
console.log("An error occurred");
}
}

handleResponse({ status: "success", data: "User profile loaded" });
handleResponse({ status: "error", data: null });

2. Pilihan Konfigurasi: Pada masa mencipta fungsi yang konfigurasi, Union Types membolehkan anda menyediakan set pilihan yang sah.

type Color = "red" | "green" | "blue";
type Size = "small" | "medium" | "large";

function createButton(color: Color, size: Size) {
console.log(`Creating a ${color} button of size ${size}`);
}

createButton("red", "medium"); // Sah
// createButton("yellow", "extra-large"); // Ini akan menyebabkan ralat

Metode Union Type Umum

Ini adalah jadual metode umum yang anda boleh gunakan dengan Union Types:

Metode	Description	Example
typeof	Memeriksa jenis nilai	typeof x === "string"
instanceof	Memeriksa jika objek adalah contoh kelas tertentu	x instanceof Date
in	Memeriksa jika properti wujud dalam objek	"name" in x
Array.isArray()	Memeriksa jika nilai adalah array	Array.isArray(x)

Kesimpulan

Wah! Kita telah meliputi banyak tanah hari ini, kan? Union Types mungkin kelihatan sedikit rumit pada permulaan, tetapi mereka adalah alat yangamat kuat dalam peralatan TypeScript anda. Mereka membolehkan anda menulis kod yang lebih fleksibel dan kokoh, menangkap ralat potensial sebelum mereka berlaku.

Ingat, pengkomputeran adalah seperti belajar bahasa baru - ia memerlukan latihan dan kesabaran. Jangan hairan jika anda tidak mendapatkannya dengan betul pada permulaan. Terus cuba, terus kod, dan sebelum anda tahu, anda akan menggunakan Union Types seperti seorang pro!

Bila kita bersama, saya diingatkan oleh seorang pelajar yang pernah katakan kepada saya, "Union Types adalah seperti kapak瑞士 di dalam kod saya!" Dan anda tahu apa? Mereka benar-benar betul. Jadi, pergilah, pemrogram muda, dan may your Union Types always be in your favor! ??

Credits: Image by storyset