null và undefined trong TypeScript: kiểm tra, ?. và ??

Khi bật strictNullChecks (một phần của strict), null và undefined là các kiểu riêng. Một string không bao giờ có thể là null; giá trị có thể bị thiếu phải nói rõ điều đó trong kiểu của nó, ví dụ string | null, và TypeScript buộc bạn xử lý trường hợp đó trước khi dùng giá trị.

function initials(name: string | null | undefined): string {
  if (name == null) return "?"; // handles both null and undefined
  return name
    .split(" ")
    .map((part) => part[0])
    .join("");
}

console.log(initials("Ada Lovelace")); // AL
console.log(initials(null));           // ?
console.log(initials(undefined));      // ?

Sau phép kiểm tra, trình biên dịch biết name là string, nên được phép gọi .split. Phần còn lại của trang này trình bày các cách kiểm tra như vậy và những toán tử giúp viết chúng ngắn gọn.

strictNullChecks và lỗi "possibly null"

Khi một kiểu có chứa null hoặc undefined, TypeScript không cho bạn dùng giá trị như thể nó luôn tồn tại:

// This does not compile: name may be null
function greet(name: string | null) {
  return "Hello, " + name.toUpperCase();
}

console.log(greet("ada"));

index.ts(3,22): error TS18047: 'name' is possibly 'null'.

Phiên bản với undefined là lỗi TS18048, 'x' is possibly 'undefined'. Nếu không có strictNullChecks, null và undefined được chấp nhận trong mọi kiểu và đoạn code này vẫn biên dịch, rồi bị crash lúc chạy với một TypeError ngay lần đầu name là null. Loại bug này chính là lý do chính để luôn bật strict.

Những kiểu này xuất hiện ở đâu trong code hằng ngày:

Kiểm tra null và undefined

Mỗi phép kiểm tra dưới đây đều thu hẹp kiểu bên trong khối lệnh. Chọn cách khớp với thứ bạn muốn loại ra.

function label(value: string | null | undefined): string {
  if (value === undefined) return "undefined";
  if (value === null) return "null";
  return value.toUpperCase(); // value is string here
}

function orNone(value: string | null | undefined): string {
  if (value == null) return "(none)"; // == null matches null AND undefined
  return `"${value}"`;
}

console.log(label(undefined), label(null), label("ok")); // undefined null OK
console.log(orNone(null), orNone(undefined), orNone("")); // (none) (none) ""

== null là chỗ duy nhất mà so sánh lỏng được xem là cách viết chuẩn: nó đúng với đúng null và undefined, không gì khác. Kiểm tra truthy sẽ coi chuỗi rỗng là bị thiếu, và đó thường là một bug.

Optional chaining: ?.

a?.b đọc b nếu a không phải null hay undefined, ngược lại thì dừng và trả về undefined. Toán tử này cũng dùng được với chỉ số, a?.[i], và với lời gọi hàm, fn?.().

interface User {
  name: string;
  address?: { city: string; zip?: string };
  tags?: string[];
  onLogin?: () => string;
}

const ada: User = { name: "Ada", address: { city: "London" }, onLogin: () => "welcome" };
const bob: User = { name: "Bob" };

console.log(ada.address?.city);        // London
console.log(bob.address?.city);        // undefined
console.log(ada.address?.zip?.length); // undefined
console.log(bob.tags?.[0]);            // undefined
console.log(ada.onLogin?.());          // welcome
console.log(bob.onLogin?.());          // undefined

Kiểu của bob.address?.city là string | undefined: optional chaining thêm undefined vào kết quả, nên bạn thường dùng nó kèm ??. Hành vi lúc chạy là JavaScript thuần; xem optional chaining để biết chi tiết về cơ chế ngắt sớm (short-circuit).

Dấu hai chấm hỏi: ??

a ?? b trả về a, trừ khi nó là null hoặc undefined, khi đó trả về b. Toán tử này thay cho cách viết cũ a || b, vốn loại bỏ luôn cả 0, "", false và NaN:

function pageSize(input: number | undefined): string {
  const withOr = input || 20;      // 0 is falsy, so it is replaced
  const withNullish = input ?? 20; // only undefined is replaced
  return `${withOr} vs ${withNullish}`;
}

console.log(pageSize(undefined)); // 20 vs 20
console.log(pageSize(0));         // 20 vs 0

const scores = new Map([["Ada", 90]]);
const score: number = scores.get("Linus") ?? 0; // number | undefined becomes number
console.log(score);                             // 0

Về mặt kiểu, ?? loại null và undefined khỏi vế trái rồi hợp phần còn lại với vế phải, vì vậy scores.get("Linus") ?? 0 gán được cho một number.

Gán nullish: ??=

a ??= b gán b cho a chỉ khi a là null hoặc undefined. Hai toán tử anh em ||= và &&= gán khi vế trái là falsy hoặc truthy.

interface Options {
  retries?: number;
  label?: string;
}

function withDefaults(opts: Options) {
  opts.retries ??= 3;   // assign only if null or undefined
  opts.label ||= "job"; // assign if falsy, so "" is replaced too
  return opts;
}

console.log(withDefaults({}));                       // { retries: 3, label: 'job' }
console.log(withDefaults({ retries: 0, label: "" })); // { retries: 0, label: 'job' }

retries: 0 được giữ nguyên qua ??=, còn label rỗng bị ||= thay thế. Sau opts.retries ??= 3, TypeScript thu hẹp opts.retries thành number trong phần còn lại của hàm.

Thuộc tính tùy chọn và | undefined

nickname?: string và nickname: string | undefined khi đọc thì giống nhau, nhưng khác ở chỗ khóa có bắt buộc phải tồn tại hay không:

interface WithOptional { nickname?: string }            // key may be missing
interface WithUndefined { nickname: string | undefined } // key must be present

const a: WithOptional = {};
const b: WithUndefined = { nickname: undefined };

// @ts-expect-error: Property 'nickname' is missing in type '{}' but required in type 'WithUndefined'.
const c: WithUndefined = {};

console.log("nickname" in a, "nickname" in b); // false true
console.log(a.nickname === b.nickname);        // true: both read as undefined

Dùng ? khi nơi gọi có thể bỏ qua thuộc tính, và | undefined khi bạn muốn mọi nơi gọi đều phải truyền nó một cách tường minh, kể cả khi giá trị là undefined. Tùy chọn exactOptionalPropertyTypes (không thuộc strict) siết ? chặt hơn nữa: lúc đó nickname?: string từ chối { nickname: undefined } và chỉ chấp nhận khóa vắng mặt hoặc một chuỗi. Tham số tùy chọn của hàm (x?: number) hoạt động giống thuộc tính tùy chọn: bên trong hàm, x có kiểu number | undefined.

Nên dùng null hay undefined

TypeScript không bắt bạn phải chọn, nhưng trộn cả hai trong một dự án nghĩa là mọi phép kiểm tra đều phải xử lý hai trường hợp. Một quy ước phổ biến:

• Dùng undefined (và thuộc tính tùy chọn) cho trạng thái "chưa đặt" trong các kiểu của bạn. Đây là thứ JavaScript tự tạo ra theo mặc định: thuộc tính không tồn tại, đối số bị bỏ qua, find và Map.get không tìm thấy.
• Chấp nhận null ở nơi API trả về nó: JSON không có undefined, String.prototype.match và nhiều phương thức DOM trả về null.
• Kiểm tra bằng == null khi giá trị có thể là một trong hai.

Truy cập mảng theo chỉ số là kẽ hở duy nhất: users[5] có kiểu của phần tử ngay cả khi chỉ số vượt ngoài phạm vi. Tùy chọn noUncheckedIndexedAccess (không thuộc strict) thêm | undefined vào mọi lần truy cập theo chỉ số để trình biên dịch bắt được cả trường hợp đó.