as trong TypeScript: type assertion và ép kiểu

value as Type là một type assertion: nó bảo TypeScript coi value là Type. Mọi người hay gọi nó là ép kiểu (cast), nhưng thực ra nó chỉ là một chỉ dẫn cho trình biên dịch. Nó bị xóa khỏi đầu ra JavaScript, không chuyển đổi gì và không kiểm tra gì lúc chạy.

interface Config {
  port: number;
  host: string;
}

const text = '{"port": 8080, "host": "localhost"}';

// JSON.parse returns any; the assertion gives the result a useful type
const config = JSON.parse(text) as Config;

console.log(config.port + 1);            // 8081
console.log(config.host.toUpperCase());  // LOCALHOST

Đây là cách dùng điển hình: bạn biết về một giá trị nhiều hơn trình biên dịch (ở đây là cấu trúc của một đoạn JSON), và bạn nói ra điều đó. Nếu bạn sai, sẽ không có gì cảnh báo. Các phần tiếp theo cho thấy điều đó nghĩa là gì và khi nào một phép kiểm tra lúc chạy là lựa chọn tốt hơn.

as và cú pháp ngoặc nhọn

Cùng một assertion có hai cách viết:

const someValue: unknown = "hello";
const a = someValue as string;   // as syntax
const b = <string>someValue;     // angle-bracket syntax, same meaning

Dạng ngoặc nhọn không được phép trong tệp .tsx, nơi <string> sẽ bị đọc thành một thẻ JSX. Dùng as ở mọi nơi thì bạn không bao giờ phải bận tâm. Assertion có độ ưu tiên thấp, nên hãy bọc nó trong ngoặc đơn khi bạn viết tiếp biểu thức: (value as string).length.

Assertion không chuyển đổi giá trị

Đây là phần gây ra bug thật. Một assertion thay đổi điều trình biên dịch tin về một giá trị, chứ không thay đổi chính giá trị đó:

const input: unknown = "42";

const asserted = input as number;  // compiles: unknown can be asserted to anything
const converted = Number(input);   // an actual conversion

console.log(asserted + 1);   // 421 (string concatenation: it is still "42")
console.log(converted + 1);  // 43
console.log(typeof asserted, typeof converted); // string number

Trình biên dịch tin asserted là number, nên asserted + 1 qua được kiểm tra kiểu như một phép cộng số. Lúc chạy, nó vẫn là chuỗi "42" và JavaScript nối chuỗi. Để đổi kiểu của một giá trị, hãy chuyển đổi nó: Number(x), String(x), Boolean(x), BigInt(x), new Date(x). Trang chuyển chuỗi sang số so sánh các hàm chuyển đổi.

Trình biên dịch cho phép những gì

as không phải không có giới hạn. TypeScript cho phép x as T khi một trong hai kiểu gán được cho kiểu kia: mở rộng ("a" as string, dog as Animal) và thu hẹp (animal as Dog, unknown as User) đều được. Khi hai kiểu hoàn toàn không giao nhau, nó từ chối:

// This does not compile: string and number do not overlap.
const input = "42";
const n = input as number;

console.log(n);

Trình biên dịch báo index.ts(3,11): error TS2352: Conversion of type 'string' to type 'number' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first. Chính thông báo này chỉ ra lối thoát: input as unknown as number. Assertion kép đó biên dịch được, và lúc chạy nó sai y hệt ví dụ ở trên. Khi bạn thấy cần đến nó, cách sửa đúng thường là một phép chuyển đổi (Number(input)) hoặc một kiểu khác.

Quy tắc giao nhau khá lỏng với đối tượng. Một object literal có một vài thuộc tính vẫn được chấp nhận, và đó là cách as âm thầm cho những đối tượng thiếu sót lọt qua:

interface User {
  name: string;
  email: string;
}

const draft = { name: "Ada" } as User; // compiles: email is missing
const empty = {} as User;              // compiles too

console.log(draft.name);               // Ada
console.log(typeof draft.email);       // undefined, although the type says string
console.log(empty.name?.length);       // undefined

Một chú thích kiểu (const draft: User = { name: "Ada" }) hoặc satisfies User sẽ báo thiếu email (TS2741). Chỉ dùng as trên object literal khi bạn thật sự định điền đủ sau này, và nên ưu tiên tạo đối tượng đầy đủ ngay từ đầu.

as const thì khác

as const trông giống một assertion nhưng làm điều ngược lại với nới lỏng: nó làm một literal hẹp nhất có thể. Chuỗi giữ nguyên literal type, mảng thành tuple readonly, và thuộc tính của đối tượng thành readonly.

const sizes = ["small", "medium", "large"] as const;
type Size = (typeof sizes)[number]; // "small" | "medium" | "large"

const point = { x: 1, y: 2 } as const; // { readonly x: 1; readonly y: 2 }

function isSize(value: string): value is Size {
  return (sizes as readonly string[]).includes(value);
}

console.log(isSize("medium"), isSize("huge")); // true false
console.log(point.x + point.y);                // 3

Cách này an toàn, vì nó mô tả literal một cách chính xác thay vì khẳng định điều mà trình biên dịch không thấy được. (sizes as readonly string[] bên trong isSize là một assertion mở rộng, cũng an toàn: nó cho phép includes nhận bất kỳ chuỗi nào.) Xem thêm ở trang literal type.

Khi nào type guard là công cụ tốt hơn

as là một lời khẳng định; type guard là một phép kiểm tra. Ở ranh giới nơi dữ liệu đến từ bên ngoài code của bạn (JSON, fetch, localStorage, dữ liệu người dùng nhập, một message), lời khẳng định có thể sai, và một assertion biến một lỗi rõ ràng ở ranh giới thành một lỗi khó hiểu ở chỗ khác.

interface Point {
  x: number;
  y: number;
}

function isPoint(v: unknown): v is Point {
  return typeof v === "object" && v !== null &&
    "x" in v && typeof v.x === "number" &&
    "y" in v && typeof v.y === "number";
}

const raw: unknown = JSON.parse('{"x": 3, "y": "4"}');

// With as: compiles, and the bug surfaces later
const p1 = raw as Point;
console.log(p1.x + p1.y); // 34 (a string snuck in)

// With a guard: the bad data is caught where it enters
if (isPoint(raw)) console.log(raw.x + raw.y);
else console.log("invalid point");

Hướng dẫn sơ lược về những công cụ trông giống nhau:

Vẫn còn hai cách dùng as hợp lý: thu hẹp kiểu ở chỗ trình biên dịch không theo dõi được (một mục Map bạn vừa đặt hai dòng trước, một giá trị từ thư viện không có kiểu), và code test tạo dữ liệu mẫu không đầy đủ. Hãy giữ chúng ngắn gọn và đặt gần nơi bạn biết lời khẳng định là đúng.