Khám Phá Union Type trong TypeScript

TypeScript là một ngôn ngữ lập trình mạnh mẽ, được phát triển dựa trên nền tảng JavaScript, mang lại cho lập trình viên nhiều tính năng hữu ích giúp việc phát triển ứng dụng trở nên dễ dàng hơn. Trong số các tính năng nổi bật của TypeScript, Union Type là một trong những khái niệm quan trọng mà bạn cần nắm rõ.

Union Type là gì?

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

Cách Hoạt Động của Union Type

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 lập trình viên dễ dàng xử lý các biến có thể chứa nhiều kiểu dữ liệu khác nhau mà không gặp phải lỗi.

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

Khi sử dụng Union Type, việc kiểm tra kiểu dữ liệu trước khi thực hiện các thao tác trên biến là rất quan trọng. TypeScript cung cấp nhiều cơ chế hữu ích để thực hiện việc này.

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 để xác định kiểu dữ liệu trước khi xử lý.

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

Union Type có nhiều ứng dụng thực tế trong lập trình, bao gồm:

1. 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 đa dạng. Union Type giúp tăng cường khả năng xử lý linh hoạt các loại dữ liệu này.

   typescript Copy

   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"

2. Quản Lý Phản Hồi API: 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. Việc sử dụng Union Type giúp lập trình viên dễ dàng quản lý và xử lý các kiểu phản hồi khác nhau.

   typescript Copy

   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à Các Best Practices

Kết hợp Union Type với các tính năng khác của TypeScript như Generics và Intersection Types có thể tạo ra các kiểu dữ liệu mạnh mẽ hơn, hỗ trợ việc phát triển ứng dụng hiệu quả.

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: Mặc dù Union Type rất mạnh mẽ, nhưng cần phải sử dụng một cách hợp lý để tránh làm code trở nên phức tạp.
• Kiểm tra kiểu dữ liệu cẩn thận: Hãy sử dụng các phương pháp kiểm tra kiểu dữ liệu để đảm bảo tính an toàn và giảm thiểu lỗi.
• Kết hợp với các tính năng khác của TypeScript: Nên cân nhắc việc 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.

Kết Luận

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

Tài Liệu Tham Khảo

• TypeScript Handbook - Union Types
• MDN Web Docs - TypeScript

Bạn đã có kinh nghiệm gì với Union Type trong TypeScript chưa? Hãy chia sẻ câu chuyện và các câu hỏi của bạn ở phần bình luận phía dưới!
source: viblo