Union Types trong TypeScript cho phép bạn định nghĩa một biến có thể chứa nhiều kiểu dữ liệu khác nhau. Điều này rất hữu ích khi bạn cần một biến có thể nhận nhiều loại giá trị mà không cần phải xác định rõ ràng một kiểu duy nhất. Union types giúp tăng tính linh hoạt và an toàn cho mã nguồn của bạn.

Bài viết này là một phần của chuỗi học TypeScript trên "codetuthub.com", cùng với các bài học khác như TypeScript Simple Types, TypeScript Tuples, và TypeScript Enums.

1. Định nghĩa Union Types

Bạn có thể định nghĩa union type bằng cách sử dụng dấu | giữa các kiểu dữ liệu. Biến được khai báo với union type có thể nhận bất kỳ kiểu nào trong số các kiểu được chỉ định.

Ví dụ

ts
let id: string | number;
id = 123; // Hợp lệ
id = "ABC"; // Hợp lệ

Trong ví dụ này, biến id có thể là một chuỗi hoặc một số.

2. Sử dụng Union Types

Union types rất hữu ích khi bạn muốn xây dựng các hàm hoặc cấu trúc dữ liệu mà có thể làm việc với nhiều kiểu khác nhau.

Ví dụ về hàm với Union Types

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

printId(101); // Kết quả: "ID: 101"
printId("202"); // Kết quả: "ID: 202"

Trong ví dụ này, hàm printId có thể nhận cả chuỗi và số làm tham số.

3. Kiểm tra kiểu (Type Guards)

Khi làm việc với union types, bạn có thể cần kiểm tra kiểu để đảm bảo rằng biến có kiểu phù hợp trước khi sử dụng nó.

Ví dụ

ts
function printId(id: string | number): void {
    if (typeof id === "string") {
        console.log(`ID as string: ${id}`);
    } else {
        console.log(`ID as number: ${id}`);
    }
}

printId(101); // Kết quả: "ID as number: 101"
printId("202"); // Kết quả: "ID as string: 202"

Trong ví dụ này, chúng ta sử dụng typeof để kiểm tra kiểu dữ liệu của id trước khi thực hiện các thao tác khác.

4. Union Types với mảng

Union types cũng có thể được sử dụng với mảng, cho phép bạn lưu trữ danh sách các giá trị có kiểu khác nhau.

Ví dụ

ts
let mixedArray: (string | number)[] = [1, "two", 3, "four"];
mixedArray.push(5); // Hợp lệ
mixedArray.push("six"); // Hợp lệ

Trong ví dụ này, mixedArray có thể chứa cả số và chuỗi.

5. Sử dụng Union Types trong Interfaces

Union types có thể được sử dụng trong các interface hoặc type alias để định nghĩa cấu trúc phức tạp hơn.

Ví dụ

ts
type Vehicle = {
    make: string;
    model: string;
    year: number;
    type: "car" | "truck"; // Sử dụng union types
};

const myCar: Vehicle = {
    make: "Toyota",
    model: "Corolla",
    year: 2021,
    type: "car"
};

Trong ví dụ này, thuộc tính type của Vehicle chỉ có thể là "car" hoặc "truck".

6. Kết luận

Union types trong TypeScript cung cấp sự linh hoạt và an toàn trong việc định nghĩa các biến có thể chứa nhiều kiểu dữ liệu khác nhau. Chúng cho phép bạn viết mã rõ ràng và dễ bảo trì hơn. Để tìm hiểu thêm về TypeScript, hãy tham khảo các bài học liên quan trên "codetuthub.com" như TypeScript Simple Types, TypeScript Tuples, và TypeScript Interfaces.