Dấu chấm than trong TypeScript: non-null assertion (!)

Dấu chấm than sau một biểu thức, value!, là toán tử non-null assertion. Nó bỏ null và undefined khỏi kiểu, nên một number | undefined có thể được dùng như number. Đó là lời hứa với trình biên dịch, không phải phép kiểm tra: lúc chạy không có gì xảy ra.

const prices = new Map<string, number>([
  ["tea", 2.5],
  ["coffee", 3.2],
]);

const tea = prices.get("tea");         // number | undefined
const coffee = prices.get("coffee")!;  // number

console.log(coffee.toFixed(2)); // 3.20
console.log(tea!.toFixed(2));   // 2.50: ! works on any expression

Không có !, tea.toFixed(2) là lỗi TS18048, 'tea' is possibly 'undefined'. Có nó, code biên dịch được vì bạn đã báo cho trình biên dịch rằng khóa có tồn tại.

x! làm gì lúc chạy: không gì cả

Dấu ! bị xóa khỏi đầu ra. JavaScript được biên dịch từ prices.get("coffee")! chỉ là prices.get("coffee"). Nếu lời khẳng định sai, lỗi xuất hiện về sau, ở chỗ đầu tiên giá trị bị thiếu được dùng tới:

const prices = new Map<string, number>([["tea", 2.5]]);

try {
  const juice = prices.get("juice")!; // compiles: the ! silences the check
  console.log(juice.toFixed(2));      // TypeError at runtime
} catch (e) {
  console.log((e as Error).message);
}

Chương trình in ra Cannot read properties of undefined (reading 'toFixed'). Lỗi xảy ra ở dòng ngay sau !, còn trong code thực tế nó có thể cách xa hơn nhiều: undefined có thể được lưu vào một đối tượng rồi gây lỗi ở một tệp khác. Khoảng cách đó là lý do ! rủi ro.

Definite assignment: let x!: T

Cùng ký hiệu đó trong một khai báo mang ý nghĩa liên quan. TypeScript theo dõi xem một biến có được gán trước khi đọc hay không, và nó không theo dõi được phép gán diễn ra bên trong một hàm khác:

// This does not compile: TypeScript cannot see the assignment inside init()
let config: { port: number };

function init() {
  config = { port: 8080 };
}

init();
console.log(config.port);

index.ts(9,13): error TS2454: Variable 'config' is used before being assigned.

let config!: { port: number }; là một definite assignment assertion: "biến này sẽ được gán trước mọi lần đọc". Nó sửa được lỗi, nhưng có cùng nhược điểm như x!: nếu init() bị bỏ qua, lần đọc sẽ nhận undefined. Tổ chức lại code thường tốt hơn, ví dụ const config = init(); với init trả về đối tượng.

Thuộc tính của lớp: prop!: T

Với strictPropertyInitialization (một phần của strict), mọi thuộc tính của lớp phải được khởi tạo ngay trong khai báo hoặc trong hàm khởi tạo. Nếu không, bạn gặp lỗi TS2564: Property 'socket' has no initializer and is not definitely assigned in the constructor. Khi một thuộc tính được gán sau đó bởi một phương thức hay một framework, prop!: T bảo trình biên dịch chấp nhận nó:

class Connection {
  url: string;
  socket!: { send(msg: string): string }; // set in open(), not in the constructor

  constructor(url: string) {
    this.url = url;
  }

  open() {
    this.socket = { send: (msg) => `sent "${msg}" to ${this.url}` };
  }
}

const c = new Connection("ws://example.com");
console.log(c.socket);            // undefined: declared but not set yet
c.open();
console.log(c.socket.send("hi")); // sent "hi" to ws://example.com

console.log đầu tiên cho thấy khoảng trống: kiểu nói rằng socket luôn có mặt, nhưng trước open() nó là undefined. Gọi c.socket.send lúc đó vẫn biên dịch được và ném lỗi. Nếu thuộc tính thực sự có thể bị thiếu, hãy khai báo socket?: ... và kiểm tra nó, hoặc tạo đối tượng trong hàm khởi tạo. Nơi chính mà prop! là cách làm chuẩn là một framework điền thuộc tính sau khi khởi tạo: @ViewChild(...) child!: ChildDirective của Angular (được gán trước khi ngAfterViewInit chạy), hoặc các lớp entity của ORM mà thư viện điền các cột khi nạp một hàng (tài liệu của MikroORM viết @Property() title!: string).

Những cách an toàn hơn

Hầu hết các dấu ! có thể thay bằng thứ trình biên dịch kiểm tra được, hoặc bằng một phép kiểm tra báo lỗi rõ ràng đúng chỗ:

function must<T>(value: T | null | undefined, what: string): T {
  if (value == null) throw new Error(`missing ${what}`);
  return value;
}

function assertDefined<T>(value: T, what: string): asserts value is NonNullable<T> {
  if (value == null) throw new Error(`missing ${what}`);
}

const env = new Map([["PORT", "8080"]]);

const port = must(env.get("PORT"), "PORT"); // string
console.log(Number(port) + 1);              // 8081

const host = env.get("HOST");
try {
  assertDefined(host, "HOST");
  console.log(host.toUpperCase()); // host is string after the assertion
} catch (e) {
  console.log((e as Error).message); // missing HOST
}

Cả hai hàm hỗ trợ đều thu hẹp kiểu giống !, nhưng một giả định sai sẽ tạo ra missing HOST ngay tại chỗ thay vì một TypeError ở đâu đó khác. assertDefined là một assertion function (asserts value is ...): sau lời gọi, trình biên dịch coi host là string. Xem thêm các mẫu ở trang type guard.

Những dấu chấm than khác

! mang ý nghĩa khác nhau tùy vị trí:

Chỉ hai dạng đầu bị xóa lúc biên dịch. !value và !!value chạy lúc chạy và trả về một boolean.