Thu hẹp kiểu trong TypeScript: phân tích luồng điều khiển

Thu hẹp kiểu (type narrowing) là việc TypeScript tìm ra một kiểu cụ thể hơn cho một giá trị tại một điểm trong code, dựa trên những phép kiểm tra mà code đã thực hiện. Một tham số string | number trở thành string bên trong if (typeof x === "string") và thành number trong else.

function pad(value: string | number): string {
  if (typeof value === "number") {
    // value: number
    return value.toFixed(2).padStart(8);
  }
  // value: string (number was handled above)
  return value.padStart(8);
}

console.log(`[${pad(3.14159)}]`); // [    3.14]
console.log(`[${pad("abc")}]`);   // [     abc]

Gọi value.toFixed(2) trước phép kiểm tra sẽ là lỗi biên dịch, vì toFixed không tồn tại trên string. Phép kiểm tra là JavaScript bình thường và chạy lúc chạy; việc thu hẹp là trình biên dịch đọc phép kiểm tra đó và điều chỉnh kiểu. Không có gì được xuất thêm.

Phân tích luồng điều khiển

TypeScript theo dõi mọi đường đi qua một hàm: if/else, return và throw sớm, switch, vòng lặp, và các toán tử ngắn mạch &&, ||, ?? và ?:. Tại mỗi điểm, kiểu của một biến là những gì vẫn còn có thể xảy ra ở đó.

function firstWord(text: string | null | undefined): string {
  if (text == null) return "(none)";   // removes null and undefined
  // text: string
  const trimmed = text.trim();
  const space = trimmed.indexOf(" ");
  return space === -1 ? trimmed : trimmed.slice(0, space);
}

function lengthOrZero(list?: string[]): number {
  return list && list.length > 0 ? list.length : 0; // list: string[] after &&
}

console.log(firstWord("  hello typed world")); // hello
console.log(firstWord(undefined));             // (none)
console.log(lengthOrZero(["a", "b"]), lengthOrZero()); // 2 0

Kiểu viết return sớm ("guard clause") là cách thu hẹp dễ đọc nhất: xử lý các trường hợp đặc biệt trước, rồi phần còn lại của hàm làm việc với kiểu đã gọn gàng.

Mọi cách thu hẹp kiểu

Ba dạng cuối được trình bày trong trang type guard và discriminated union. Các dạng còn lại ở bên dưới.

Thu hẹp theo truthiness

if (x) loại bỏ null và undefined (cùng các literal type false, 0, ""). Cách này ngắn gọn, nhưng có một cái bẫy kinh điển: 0 và "" là falsy, nên những giá trị hợp lệ bị coi là không có.

function describeCount(count: number | undefined): string {
  if (!count) return "unknown";   // bug: 0 is falsy too
  return `${count} items`;
}

function describeCountFixed(count: number | undefined): string {
  if (count === undefined) return "unknown";
  return `${count} items`;
}

console.log(describeCount(0));      // unknown
console.log(describeCountFixed(0)); // 0 items

Với số và chuỗi, hãy so sánh tường minh với undefined hoặc null (hoặc dùng ??). Truthiness dùng tốt cho đối tượng, mảng và hàm, vì chúng không bao giờ là falsy.

Thu hẹp theo so sánh bằng

===, !==, == và != thu hẹp kiểu ở cả hai vế. So sánh với một literal sẽ thu hẹp thành literal đó; == null (so sánh lỏng) khớp cả null lẫn undefined chỉ trong một phép kiểm tra, và đây là chỗ duy nhất mà so sánh lỏng được coi là cách viết chuẩn.

type Status = "active" | "paused" | "deleted";

function label(status: Status, note: string | null | undefined): string {
  if (status === "deleted") return "gone";
  // status: "active" | "paused"
  const suffix = note != null ? ` (${note})` : ""; // note: string in the true branch
  return status.toUpperCase() + suffix;
}

console.log(label("paused", "until Monday")); // PAUSED (until Monday)
console.log(label("active", undefined));      // ACTIVE
console.log(label("deleted", null));          // gone

So sánh hai biến sẽ thu hẹp cả hai về phần kiểu chung mà chúng có thể có: nếu a: string | number và b: string | boolean thỏa a === b, cả hai đều là string bên trong if.

Toán tử in

"key" in obj thu hẹp một union các kiểu đối tượng về những thành viên có (hoặc có thể có) thuộc tính đó.

type Fish = { name: string; swim: () => string };
type Bird = { name: string; fly: () => string };

function move(pet: Fish | Bird): string {
  if ("swim" in pet) {
    return pet.swim(); // pet: Fish
  }
  return pet.fly();    // pet: Bird
}

console.log(move({ name: "Nemo", swim: () => "splash" })); // splash
console.log(move({ name: "Tweety", fly: () => "flap" }));  // flap

in cũng dùng được trên unknown khi bạn đã biết nó là đối tượng: sau typeof v === "object" && v !== null && "id" in v, TypeScript biết v có thuộc tính id kiểu unknown. Với những union bạn tự thiết kế, một thuộc tính nhãn chung (kind: "fish") rõ ràng hơn việc dò xem có phương thức nào: mẫu đó gọi là discriminated union.

Thu hẹp theo phép gán

Một biến có kiểu được khai báo, và một kiểu đã thu hẹp đi theo các phép gán của nó. Gán một giá trị sẽ thu hẹp biến về kiểu của giá trị đó, trong giới hạn của kiểu đã khai báo.

let id: string | number = "a-17";
console.log(id.toUpperCase()); // id: string here, so string methods work

id = 42;
console.log(id.toFixed(1));    // id: number now

// id = true; would be an error: the declared type is still string | number

Khi nào thu hẹp kiểu bị mất

Thu hẹp kiểu mang tính cục bộ và thận trọng. Một vài tình huống sẽ đặt lại nó:

• Một biểu thức khác. Kiểm tra obj.name sẽ thu hẹp obj.name (và obj["name"]), nhưng không thu hẹp obj[key] khi key là một biến string chứ không phải literal, cũng không thu hẹp một bản sao tạo ra trước phép kiểm tra.
• Callback và phép gán lại. Bên trong một callback, một let đã được thu hẹp chỉ giữ được thu hẹp nếu nó không bị gán lại sau khi callback được tạo. Một const hoặc một tham số không bao giờ bị gán lại thì vẫn giữ được thu hẹp.
• Phép kiểm tra bị giấu trong hàm hỗ trợ. Một hàm isString(x: unknown): boolean không cho trình biên dịch biết gì cả. Cho nó kiểu trả về là type predicate, x is string, thì các lời gọi tới nó sẽ thu hẹp kiểu giống như typeof.

// This does not compile: x is reassigned after the callback, so the callback loses the narrowing.
function run(flag: boolean): void {
  let x: string | undefined = flag ? "ready" : undefined;
  if (x !== undefined) {
    [1, 2].forEach(() => console.log(x.length));
  }
  x = undefined;
}

run(true);

Trình biên dịch báo index.ts(5,38): error TS18048: 'x' is possibly 'undefined'. Callback có thể chạy muộn hơn, sau x = undefined. Xóa phép gán cuối đó (hoặc sao chép giá trị vào một const bên trong if) thì code biên dịch được và in ra 5 hai lần.

Một hàm hỗ trợ trả về boolean có thể sửa bằng cách khai báo điều nó chứng minh được. Đó chính là type guard:

function isString(value: unknown): value is string {
  return typeof value === "string";
}

Từ TypeScript 5.5, trình biên dịch tự suy ra những predicate như vậy cho các arrow function đơn giản, vì thế list.filter((x) => x !== undefined) giờ trả về một mảng không chứa undefined.