typeof trong TypeScript: type guard và toán tử kiểu typeof

typeof có hai nghĩa trong TypeScript. Trong một biểu thức, nó là toán tử JavaScript: nó chạy, trả về một chuỗi như "string" hay "number", và TypeScript thu hẹp kiểu của biến khi bạn so sánh chuỗi đó. Ở vị trí kiểu, nó là một truy vấn kiểu: typeof config cho ra kiểu tĩnh của biến config.

// 1. The runtime operator: a check that narrows
function double(value: string | number): string | number {
  if (typeof value === "string") {
    return value.repeat(2); // value: string
  }
  return value * 2;         // value: number
}
console.log(double("ab"), double(21)); // abab 42

// 2. The type query: reuse the type of an existing value
const defaults = { retries: 3, verbose: false };
type Options = typeof defaults; // { retries: number; verbose: boolean }

const custom: Options = { retries: 5, verbose: true };
console.log(typeof custom, custom); // object { retries: 5, verbose: true }

Dòng cuối cho thấy sự khác biệt: typeof custom trong console.log là toán tử lúc chạy và in ra object, còn typeof defaults sau type Options = là truy vấn lúc biên dịch và không bao giờ có mặt trong JavaScript.

Hai nghĩa trong nháy mắt

TypeScript phân biệt hai nghĩa dựa vào vị trí, nên cùng một từ khóa không bao giờ mang cả hai nghĩa cùng lúc.

Kết quả của typeof lúc chạy

Toán tử lúc chạy trả về một trong tám chuỗi. Chạy đoạn code này để xem các giá trị thường gặp cho ra gì:

const samples: [string, unknown][] = [
  ['"hi"', "hi"],
  ["42", 42],
  ["NaN", NaN],
  ["10n", 10n],
  ["true", true],
  ["undefined", undefined],
  ["null", null],
  ["{}", {}],
  ["[]", []],
  ["new Date(0)", new Date(0)],
  ['new String("x")', new String("x")],
  ["() => 1", () => 1],
  ["class A {}", class A {}],
  ['Symbol("id")', Symbol("id")],
];

for (const [label, value] of samples) {
  console.log(label.padEnd(16), typeof value);
}

Trong JavaScript thuần, typeof trên một biến chưa từng được khai báo trả về "undefined" thay vì ném lỗi. Trong TypeScript, code đó không biên dịch được: Cannot find name 'notDeclared'. (TS2304).

Thu hẹp kiểu với typeof

Một phép so sánh typeof trong if, switch, toán tử ba ngôi hay sau && sẽ thu hẹp kiểu của biến trong từng nhánh. Đây là cách chuẩn để xử lý một union các kiểu nguyên thủy, và là phép kiểm tra đầu tiên nên dùng với unknown.

function format(value: unknown): string {
  switch (typeof value) {
    case "string":
      return `"${value}"`;                 // value: string
    case "number":
    case "bigint":
      return value.toLocaleString("en-US"); // value: number | bigint
    case "boolean":
      return value ? "yes" : "no";         // value: boolean
    case "function":
      return `function ${value.name}()`;   // value: Function
    default:
      return String(value);
  }
}

console.log(format("hi"));          // "hi"
console.log(format(1234567.891));   // 1,234,567.891
console.log(format(2n ** 64n));     // 18,446,744,073,709,551,616
console.log(format(true));          // yes
console.log(format(Math.max));      // function max()
console.log(format(undefined));     // undefined

typeof x !== "string" thu hẹp theo chiều ngược lại, thành mọi thứ trừ string. Và trình biên dịch biết tám chuỗi có thể có, nên một lỗi gõ sai trong phép so sánh là lỗi biên dịch, thay vì một phép kiểm tra âm thầm luôn sai:

// This does not compile: "strnig" is not a possible typeof result.
function kind(value: string | number): string {
  if (typeof value === "strnig") {
    return "text";
  }
  return "number";
}

console.log(kind("hey"));

Trình biên dịch in ra index.ts(3,7): error TS2367: This comparison appears to be unintentional because the types '"bigint" | "boolean" | "function" | "number" | "object" | "string" | "symbol" | "undefined"' and '"strnig"' have no overlap. Trong JavaScript thuần, lỗi gõ đó sẽ âm thầm đẩy mọi chuỗi vào nhánh number. Sửa lại chính tả thì code in ra text.

Cái bẫy typeof null

Vì typeof null là "object", TypeScript thu hẹp typeof x === "object" thành object | null, không phải object. Hãy thêm một phép kiểm tra null, nếu không việc đọc thuộc tính sẽ là lỗi (TS18047 'x' is possibly 'null'.).

function hasId(value: unknown): boolean {
  // typeof alone leaves value as object | null
  if (typeof value === "object" && value !== null) {
    // value: object
    return "id" in value;
  }
  return false;
}

console.log(hasId({ id: 7 }));  // true
console.log(hasId(null));       // false
console.log(hasId([1, 2]));     // false (arrays pass the typeof check but have no id)
console.log(hasId("id"));       // false

typeof không phân biệt được mảng, ngày tháng, map và đối tượng thường: tất cả đều là "object". Dùng Array.isArray(x) cho mảng và x instanceof Date cho instance của class. Cả typeof lẫn bất kỳ thứ gì khác đều không kiểm tra được một giá trị có khớp với interface lúc chạy hay không, vì interface bị xóa khi biên dịch; để làm việc đó, hãy viết một hàm type guard kiểm tra các thuộc tính.

typeof ở vị trí kiểu

Trong một kiểu, typeof someVariable sao chép kiểu mà TypeScript đã suy ra (hoặc bạn đã khai báo) cho biến đó. Nó giúp bạn không phải tự viết kiểu cho một giá trị đã có, và giữ hai thứ luôn khớp nhau.

const theme = {
  primary: "#3178c6",
  spacing: 8,
  dark: false,
};

type Theme = typeof theme;
// { primary: string; spacing: number; dark: boolean }

function withSpacing(t: Theme, factor: number): Theme {
  return { ...t, spacing: t.spacing * factor };
}

console.log(withSpacing(theme, 2)); // { primary: '#3178c6', spacing: 16, dark: false }

let userName = "Ada";
const fixed = "Ada";
type A = typeof userName; // string
type B = typeof fixed;    // "Ada" (a const keeps its literal type)

Kết quả phụ thuộc vào cách khai báo biến: một let hoặc một thuộc tính của đối tượng bị mở rộng kiểu (string, number), còn một const kiểu nguyên thủy giữ literal type của nó. Thêm as const vào một đối tượng hoặc mảng thì typeof cho ra literal type readonly ở mọi cấp. typeof cũng nhận truy cập thuộc tính, typeof theme.spacing là number, nhưng không nhận biểu thức tùy ý: type T = typeof getTheme(); là lỗi cú pháp (';' expected., TS1005). Để lấy kiểu mà một lời gọi trả về, hãy dùng ReturnType<typeof getTheme>.

keyof typeof: khóa của đối tượng thành kiểu

keyof typeof obj là cách kết hợp phổ biến nhất. typeof biến đối tượng thành một kiểu, keyof lấy các khóa của nó, và bạn có một union các tên thuộc tính luôn đúng khi đối tượng thay đổi.

const prices = { apple: 1.2, pear: 0.8, kiwi: 0.5 };

type Fruit = keyof typeof prices; // "apple" | "pear" | "kiwi"

function priceOf(fruit: Fruit, quantity: number): string {
  return (prices[fruit] * quantity).toFixed(2);
}

console.log(priceOf("pear", 3)); // 2.40

// @ts-expect-error: Argument of type '"mango"' is not assignable to parameter of type '"apple" | "kiwi" | "pear"'.
priceOf("mango", 1);

Cùng mẹo đó trên một mảng hằng cho ra union các giá trị của nó: với const roles = ["admin", "editor"] as const, kiểu (typeof roles)[number] là "admin" | "editor". Không có as const, nó chỉ là string. Trang keyof trình bày riêng về keyof.

ReturnType<typeof fn> và typeof trên class

Các utility type như ReturnType và Parameters nhận một kiểu hàm. Tên hàm là một giá trị, nên hãy đưa nó qua typeof trước:

function createUser(name: string, admin = false) {
  return { id: name.toLowerCase(), name, admin };
}

type User = ReturnType<typeof createUser>;
// { id: string; name: string; admin: boolean }
type CreateArgs = Parameters<typeof createUser>;
// [name: string, admin?: boolean | undefined]

const args: CreateArgs = ["Grace", true];
const user: User = createUser(...args);
console.log(user); // { id: 'grace', name: 'Grace', admin: true }

Viết ReturnType<createUser> sẽ báo lỗi 'createUser' refers to a value, but is being used as a type here. Did you mean 'typeof createUser'? (TS2749), và đó chính là trình biên dịch đang yêu cầu đúng điều này.

Class là trường hợp duy nhất mà một tên vừa là giá trị vừa là kiểu. User khi dùng làm kiểu nghĩa là một instance của class; typeof User nghĩa là chính class đó, tức hàm khởi tạo, kể cả các thành viên static:

class Point {
  static origin = new Point(0, 0);
  constructor(public x: number, public y: number) {}
}

const p: Point = new Point(1, 2);        // an instance
const Ctor: typeof Point = Point;        // the class (constructor + statics)
const q = new Ctor(3, 4);                // q: Point
type Instance = InstanceType<typeof Point>; // Point

typeof, instanceof và type guard

Hãy chọn công cụ hẹp nhất phù hợp. Với instance của class, xem trang instanceof; với cấu trúc được mô tả bằng interface, hàm type guard là phép kiểm tra lúc chạy duy nhất có thể dùng.