Dấu gạch đứng (|) có ý nghĩa gì trong TypeScript?

Question

Vũ Thị Thương · Accepted Answer

Trong TypeScript, dấu gạch đứng (|) được gọi là toán tử union (union operator). Nó cho phép bạn kết hợp nhiều kiểu với nhau, tức là giá trị có thể thuộc một trong các kiểu đã chỉ định. Điều này mang lại sự linh hoạt khi bạn muốn một biến, tham số, hoặc giá trị trả về có thể có nhiều kiểu khác nhau.
Cách hoạt động của Toán Tử Union
Cú pháp của union rất đơn giản. Bạn chỉ cần sử dụng dấu gạch đứng giữa các kiểu dữ liệu để tạo một kiểu union.
Ví dụ:
let value: string | number;
Trong ví dụ này, biến value có thể chứa giá trị thuộc kiểu string hoặc number.
Ví dụ chi tiết về Toán Tử Union
1. Union với kiểu nguyên thủy
let id: string | number;
id = "123";  // Hợp lệ, vì id có thể là string
id = 123;    // Hợp lệ, vì id có thể là number
Biến id ở đây có thể nhận cả chuỗi và số, nhờ đó giúp mã linh hoạt hơn khi làm việc với các trường hợp như ID có thể dưới dạng chuỗi (ví dụ như &#8220;123&#8221;) hoặc số (ví dụ 123).
2. Union với kiểu đối tượng
Bạn cũng có thể sử dụng union với các kiểu đối tượng phức tạp.
interface Dog {
    bark: () => void;
}
interface Cat {
    meow: () => void;
}
let pet: Dog | Cat;
pet = { bark: () => console.log("Woof!") };  // Hợp lệ, pet là Dog
pet = { meow: () => console.log("Meow!") };  // Hợp lệ, pet là Cat
Trong ví dụ này, biến pet có thể là một đối tượng Dog hoặc Cat. TypeScript sẽ kiểm tra kiểu của đối tượng dựa trên các phương thức hoặc thuộc tính cụ thể của chúng.
3. Sử dụng Toán Tử Union trong Hàm
Khi một tham số có thể có nhiều kiểu, bạn có thể sử dụng union trong hàm.
function printId(id: string | number) {
    console.log(`Your ID is: ${id}`);
}
printId(101);      // Hợp lệ
printId("101");    // Hợp lệ
Hàm printId nhận tham số có kiểu union (string | number), vì vậy bạn có thể gọi hàm này với cả giá trị chuỗi và số.
Kiểm tra kiểu trong union
Khi bạn sử dụng kiểu union, TypeScript sẽ không tự động biết được kiểu nào đang được sử dụng. Do đó, bạn cần kiểm tra kiểu trước khi làm việc với giá trị.
Ví dụ:
function printId(id: string | number) {
    if (typeof id === "string") {
        console.log(`ID dưới dạng chuỗi: ${id.toUpperCase()}`);
    } else {
        console.log(`ID dưới dạng số: ${id}`);
    }
}
Trong ví dụ này, chúng ta sử dụng typeof để kiểm tra xem id là chuỗi hay số, từ đó có thể xử lý từng trường hợp một cách chính xác.
Union với nhiều kiểu dữ liệu
Bạn có thể kết hợp nhiều hơn hai kiểu bằng toán tử union.
let data: string | number | boolean;
data = "Hello";   // Hợp lệ
data = 100;       // Hợp lệ
data = true;      // Hợp lệ
Trong trường hợp này, biến data có thể là string, number, hoặc boolean. Điều này cung cấp sự linh hoạt cho việc xử lý dữ liệu có thể ở nhiều dạng.
Kết hợp với null và undefined
Bạn có thể sử dụng union để cho phép một giá trị có thể là null hoặc undefined.
let value: string | null | undefined;
value = "Hello";      // Hợp lệ
value = null;         // Hợp lệ
value = undefined;    // Hợp lệ
Kiểu union này đặc biệt hữu ích khi bạn làm việc với các giá trị có thể không tồn tại hoặc bị bỏ qua, chẳng hạn như các giá trị từ API.
Kết luận
Dấu gạch đứng (|) trong TypeScript là toán tử union, cho phép một giá trị có thể thuộc nhiều kiểu dữ liệu khác nhau. Nó giúp bạn định nghĩa các kiểu linh hoạt và xử lý dữ liệu có thể tồn tại dưới nhiều dạng khác nhau trong chương trình, từ kiểu nguyên thủy đến các đối tượng phức tạp. Sự linh hoạt này giúp bạn viết mã dễ bảo trì và dễ mở rộng hơn trong các dự án lớn.