Union & narrowing

Dữ liệu thật hay có dạng "một trong vài khả năng": một id có thể là chuỗi hoặc số, một ô có thể có giá trị hoặc rỗng. TypeScript mô tả điều đó bằng union type với dấu |: string | number nghĩa là "string HOẶC number".

Nhưng có một luật: khi biến còn là union, TS chỉ cho dùng những gì chung cho mọi nhánh. Gọi method riêng của một nhánh là lỗi ngay:

function inHoa(id: string | number) {
  return id.toUpperCase();   // number lam gi co toUpperCase
}

error TS2339: Property 'toUpperCase' does not exist on type 'string | number'.
  Property 'toUpperCase' does not exist on type 'number'.

• ▸Union A | B mô tả "giá trị thuộc một trong các kiểu liệt kê".
• ▸Khi còn là union, chỉ dùng được thành viên CHUNG của mọi nhánh.
• ▸Muốn dùng phần riêng của một nhánh, phải thu hẹp kiểu (narrowing) trước.

Narrowing là cho TypeScript bằng chứng để nó biết chắc đang ở nhánh nào. Các công cụ quen thuộc của JavaScript: typeof (cho nguyên thuỷ), instanceof (cho class), in (kiểm có thuộc tính), và kiểm truthiness/bằng nhau. TS theo dõi luồng điều kiện và tự hẹp kiểu trong mỗi nhánh:

function inRa(id: string | number): string {
  if (typeof id === "string") {
    return id.toUpperCase();   // o day TS biet id la string
  }
  return id.toFixed(2);        // con lai chac chan la number
}
console.log(inRa("bo"), inRa(3.14159));

BO 3.14

• ▸Narrowing dùng typeof / instanceof / in / kiểm bằng nhau để TS biết kiểu cụ thể.
• ▸Trong mỗi nhánh đã narrow, TS mở khoá đúng method/field của kiểu đó.
• ▸Đây là các phép kiểm JavaScript THẬT (chạy lúc runtime), không phải ép kiểu suông.

Mẫu mạnh nhất là discriminated (tagged) union: một union các object, mỗi object có chung một field "nhãn" mang literal khác nhau (vd status). Switch theo field nhãn là TS mở khoá đúng các field riêng của từng nhánh:

type KetQua =
  | { status: "loading" }
  | { status: "success"; data: string }
  | { status: "error"; message: string };

function hien(kq: KetQua): string {
  switch (kq.status) {
    case "loading": return "Dang tai...";
    case "success": return "Co: " + kq.data;      // co data
    case "error":   return "Loi: " + kq.message;  // co message
  }
}
console.log(hien({ status: "success", data: "xong" }));

Co: xong

Bấm thử từng nhánh: ở mỗi status, TypeScript chỉ cho đụng đúng field của nhánh đó.

Còn một mảnh ghép: làm sao để compiler nhắc khi bạn quên xử lý một nhánh? Dùng kiểu never ở Bài 2: ở default, nếu mọi nhánh đã xử lý hết thì biến còn lại có kiểu never; gán nó cho một biến never là hợp lệ. Thêm nhánh mới mà quên xử lý, dòng đó sẽ báo lỗi:

type Mau = "do" | "xanh";
function ten(m: Mau): string {
  switch (m) {
    case "do":   return "Do";
    case "xanh": return "Xanh";
    default:
      const _e: never = m;   // du case nen m la never -> OK
      return _e;
  }
}

error TS2322: Type '"vang"' is not assignable to type 'never'.

• ▸Gán nhánh "còn lại" cho một biến never ở default tạo ra kiểm vét cạn.
• ▸Đủ case thì biến là never, biên dịch sạch; thiếu case thì không phải never nên báo lỗi.
• ▸Nhờ vậy thêm một trạng thái mới, compiler tự dẫn bạn tới mọi switch cần cập nhật.

Union cho ta mô tả "một trong nhiều khả năng", narrowing cho ta dùng từng khả năng an toàn, và discriminated union cộng never biến trạng thái phức tạp thành thứ compiler kiểm giúp. Đây là bộ công cụ mèo con sẽ dùng hằng ngày để mô hình dữ liệu thật.