TypeScript - Các Loại Union: Giới Thiệu Dễ Dàng Cho Người Mới Bắt Đầu

Xin chào các bạn, những siêu sao lập trình tương lai! ? Bạn đã sẵn sàng nhảy vào thế giới tuyệt vời của TypeScript và học về một trong những tính năng mạnh mẽ nhất của nó chưa? Hôm nay, chúng ta sẽ khám phá các Loại Union, một khái niệm có thể听起来 đáng sợ ban đầu, nhưng tôi đảm bảo rằng bạn sẽ thấy nó rất hữu ích và thậm chí là thú vị vào cuối bài hướng dẫn này!

Là giáo viên máy tính hàng xóm thân thiện của bạn, tôi đã thấy rất nhiều học sinh sáng lên khi họ hiểu được khái niệm này. Vậy chúng ta hãy cùng bắt đầu hành trình này, nhé?

什么是 Union Types?

Trước khi chúng ta đi vào chi tiết, hãy bắt đầu với một ví dụ đơn giản. Hãy tưởng tượng bạn có một hộp ma thuật có thể chứa một xe玩具 hoặc một con thú nhồi bông, nhưng không thể chứa cả hai cùng một lúc. Đó chính là Union Type trong TypeScript - nó là cách để告诉我们的代码 rằng một biến có thể là một trong nhiều loại.

Bây giờ, hãy cùng viết một đoạn mã!

Cú Pháp: Union Literal

Cú pháp cơ bản cho một Loại Union sử dụng ký tự gạch dọc (|) để phân tách các loại khác nhau. Nó giống như đang nói với TypeScript, "Hey, này có thể là này HOẶC kia!"

let myFavorite: string | number;

myFavorite = "TypeScript"; // Đây là hợp lệ
console.log(myFavorite); // Output: TypeScript

myFavorite = 42; // Đây cũng hợp lệ
console.log(myFavorite); // Output: 42

// myFavorite = true; // Điều này sẽ gây ra lỗi

Trong ví dụ này, myFavorite có thể là một chuỗi hoặc một số. Nó giống như hộp ma thuật của chúng ta có thể chứa hoặc một từ hoặc một số, nhưng không thể chứa bất cứ thứ gì khác. Nếu chúng ta cố gắng đặt một boolean (như true) vào đó, TypeScript sẽ sử dụng cây phép thuật của mình và hiển thị lỗi cho chúng ta.

Biến Loại Union

Hãy mở rộng ví dụ trước và xem Union Types có thể làm cho mã của chúng ta linh hoạt hơn thế nào:

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

myPet = "cat"; // Đây là hợp lệ
console.log(`I have a ${myPet}`); // Output: I have a cat

myPet = "dog"; // Đây cũng hợp lệ
console.log(`I have a ${myPet}`); // Output: I have a dog

// myPet = "elephant"; // Điều này sẽ gây ra lỗi

Ở đây, chúng ta đã tạo một loại tùy chỉnh叫做 Pet có thể chỉ là một trong ba chuỗi cụ thể. Nó giống như một cửa hàng thú cưng chỉ bán mèo, chó và cá. Nếu bạn cố gắng mua một con voi, xin lỗi, không thể làm được!

Union Type và Tham Số Hàm

Union Types thực sự tỏa sáng khi chúng ta sử dụng chúng với các hàm. Chúng cho phép các hàm của chúng ta linh hoạt hơn mà không mất đi tính an toàn của loại. Hãy xem một ví dụ:

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); // Điều này sẽ gây ra lỗi

Trong hàm này, printId có thể chấp nhận hoặc một số hoặc một chuỗi作为 tham số. Nó giống như một máy đọc thẻ ID UNIVERSAL có thể xử lý cả thẻ ID số và thẻ ID văn bản. Nhưng nếu bạn cố gắng quẹt thẻ ID boolean, nó sẽ lịch sự từ chối!

Union Type và Mảng

Bây giờ, hãy nâng cấp và xem Union Types hoạt động như thế nào với các mảng. Hãy chuẩn bị cho một chút phép thuật với mảng!

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

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

mixedArray.push(6); // Đây là hợp lệ
mixedArray.push("seven"); // Đây cũng hợp lệ

// mixedArray.push(true); // Điều này sẽ gây ra lỗi

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

Ở đây, chúng ta đã tạo một mảng có thể chứa cả số và chuỗi. Nó giống như một danh sách phát có thể bao gồm cả số bài hát và tiêu đề bài hát. Nhưng nếu bạn cố gắng giấu một boolean vào đó, TypeScript sẽ bắt bạn!

Các Trường Hợp Thực Tế

Bây giờ chúng ta đã hiểu cơ bản, hãy xem một số tình huống thực tế nơi Union Types có thể cứu nguy:

1. Phản hồi từ API: Khi làm việc với API, đôi khi dữ liệu bạn nhận được có thể có các loại khác nhau. Union Types giúp bạn xử lý các biến thể này một cách linh hoạt.

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. Tùy Chọn Cấu Hình: Khi tạo các hàm có thể tùy chỉnh, Union Types cho phép bạn cung cấp một tập hợp các tùy chọn hợp lệ.

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"); // Hợp lệ
// createButton("yellow", "extra-large"); // Điều này sẽ gây ra lỗi

Các Phương Thức Thường Gặp với Union Types

Dưới đây là bảng một số phương thức phổ biến bạn có thể sử dụng với Union Types:

Phương Thức	Mô Tả	Ví Dụ
typeof	Kiểm tra loại của một giá trị	typeof x === "string"
instanceof	Kiểm tra xem một đối tượng có phải là một thể hiện của một lớp cụ thể hay không	x instanceof Date
in	Kiểm tra xem một thuộc tính có tồn tại trong một đối tượng hay không	"name" in x
Array.isArray()	Kiểm tra xem một giá trị có phải là một mảng hay không	Array.isArray(x)

Kết Luận

Uf! Chúng ta đã bao quát rất nhiều nội dung hôm nay, phải không? Các Loại Union có thể看起来有点复杂 ban đầu, nhưng chúng là những công cụ rất mạnh mẽ trong bộ công cụ TypeScript của bạn. Chúng cho phép bạn viết mã linh hoạt hơn và mạnh mẽ hơn, phát hiện lỗi tiềm ẩn trước khi chúng xảy ra.

Nhớ rằng, lập trình giống như học một ngôn ngữ mới - nó đòi hỏi sự thực hành và kiên nhẫn. Đừng nản lòng nếu bạn không hiểu ngay lập tức. Hãy tiếp tục thử nghiệm, tiếp tục lập trình, và trước khi bạn biết, bạn sẽ sử dụng các Loại Union như một chuyên gia!

Khi kết thúc, tôi nhớ lại một học sinh曾经说过, "Các Loại Union giống như một cây kéo đa năng cho mã của tôi!" Và bạn biết gì? Họ hoàn toàn đúng. Vậy hãy tiến lên, người lập trình trẻ, và chúc may mắn với các Loại Union của bạn! ??

Credits: Image by storyset