Union Type trong TypeScript

TypeScript là một ngôn ngữ lập trình mạnh mẽ mở rộng từ JavaScript, cung cấp các tính năng giúp phát triển ứng dụng dễ dàng hơn. Một trong những tính năng hữu ích nhất của TypeScript là Union Type. Trong bài viết này, chúng ta sẽ tìm hiểu Union Type là gì, cách sử dụng chúng, và những ứng dụng thực tế của chúng trong lập trình.

Union Type cho phép một biến có thể chứa một trong nhiều kiểu dữ liệu. Điều này giúp tăng tính linh hoạt và khả năng tái sử dụng code, đặc biệt khi làm việc với các hàm hoặc biến có thể nhận nhiều kiểu giá trị khác nhau.

Cách Union Type Hoạt Động

Ví Dụ Cơ Bản

let value: number | string;
value = 42;    // Hợp lệ
value = "Hello";  // Cũng hợp lệ

Trong ví dụ trên, biến value có thể là một số (number) hoặc một chuỗi (string). Điều này giúp chúng ta dễ dàng làm việc với các biến có thể chứa nhiều kiểu dữ liệu khác nhau.

Kiểm Tra Kiểu Dữ Liệu

Khi sử dụng Union Type, chúng ta thường cần kiểm tra kiểu dữ liệu trước khi thao tác với biến đó. TypeScript cung cấp các cơ chế kiểm tra kiểu dữ liệu một cách dễ dàng.

function printId(id: number | string) {
    if (typeof id === "number") {
        console.log("ID là số:", id);
    } else {
        console.log("ID là chuỗi:", id.toUpperCase());
    }
}

printId(123); // ID là số: 123
printId("abc"); // ID là chuỗi: ABC

Trong ví dụ này, hàm printId chấp nhận một đối số có thể là số hoặc chuỗi. Chúng ta sử dụng typeof để kiểm tra kiểu dữ liệu trước khi xử lý.

Ứng Dụng Thực Tế của Union Type

Union Type rất hữu ích trong nhiều tình huống lập trình. Dưới đây là một vài ví dụ cụ thể:

Xử Lý Dữ Liệu Đầu Vào

Trong các ứng dụng web, dữ liệu đầu vào từ người dùng có thể đến từ nhiều nguồn khác nhau và có các kiểu dữ liệu khác nhau. Sử dụng Union Type giúp xử lý linh hoạt các loại dữ liệu này.

function formatInput(input: string | number) {
    if (typeof input === "string") {
        return input.trim();
    } else {
        return input.toFixed(2);
    }
}

console.log(formatInput("  Hello World  ")); // "Hello World"
console.log(formatInput(42)); // "42.00"

API Responses

Khi làm việc với API, dữ liệu trả về có thể khác nhau dựa trên trạng thái yêu cầu. Sử dụng Union Type giúp quản lý và xử lý các kiểu phản hồi khác nhau một cách hiệu quả.

type SuccessResponse = {
    status: "success";
    data: any;
};

type ErrorResponse = {
    status: "error";
    message: string;
};

type ApiResponse = SuccessResponse | ErrorResponse;

function handleResponse(response: ApiResponse) {
    if (response.status === "success") {
        console.log("Dữ liệu:", response.data);
    } else {
        console.error("Lỗi:", response.message);
    }
}

const success: ApiResponse = { status: "success", data: { id: 1, name: "John" } };
const error: ApiResponse = { status: "error", message: "Not found" };

handleResponse(success); // Dữ liệu: { id: 1, name: "John" }
handleResponse(error); // Lỗi: Not found

Ví Dụ Nâng Cao và Best Practices

Kết hợp Union Type với các tính năng khác của TypeScript như Generics hoặc Intersection Types có thể tạo ra các kiểu dữ liệu mạnh mẽ và linh hoạt hơn.

type Shape = { kind: "circle"; radius: number } | { kind: "square"; size: number };

function getArea(shape: Shape) {
    if (shape.kind === "circle") {
        return Math.PI * shape.radius ** 2;
    } else {
        return shape.size ** 2;
    }
}

console.log(getArea({ kind: "circle", radius: 10 })); // 314.159...
console.log(getArea({ kind: "square", size: 10 })); // 100

Best Practices

Sử dụng Union Type một cách có mục đích: Union Type rất mạnh mẽ, nhưng cần sử dụng chúng một cách hợp lý để tránh làm code phức tạp.
Kiểm tra kiểu dữ liệu cẩn thận: Sử dụng các kiểm tra kiểu dữ liệu để đảm bảo an toàn và tránh lỗi.
Kết hợp với các tính năng khác của TypeScript: Kết hợp Union Type với các tính năng như Generics và Intersection Types để tạo ra các kiểu dữ liệu mạnh mẽ hơn.

Union Type là một tính năng mạnh mẽ và linh hoạt của TypeScript, giúp viết code rõ ràng và dễ bảo trì hơn. Hiểu và sử dụng đúng Union Type sẽ giúp bạn phát triển ứng dụng một cách hiệu quả.

Tài Liệu Tham Khảo

Bạn đã gặp vấn đề gì với Union Type trong TypeScript chưa? Hãy chia sẻ kinh nghiệm và câu hỏi của bạn trong phần bình luận dưới đây!