Dấu hỏi xuất hiện ở nhiều vị trí trong TypeScript nên người mới rất dễ nhầm. Bài này tách từng trường hợp và dùng một quy tắc đơn giản: nhìn ký tự đứng ngay cạnh dấu ?.

1. Dấu ? cho property tùy chọn

type User = {
  name: string;
  phone?: string;   //optional property
};

const an: User = { name: "An" };
console.log(an.phone); // undefined

phone?: string nghĩa là object có thể có hoặc không có phone. Khi property bị thiếu, giá trị đọc được là undefined.

2. Dấu ? cho tham số tùy chọn

// hàm này cho phép thích thì truyền name, không truyền cũng ok
function greet(name?: string): string {
  if (name === undefined) return "Xin chào bạn";
  return "Xin chào " + name;
}

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

Tham số tùy chọn phải đứng sau các tham số bắt buộc. Bên trong function, hãy xử lý trường hợp giá trị là undefined.

3. Optional chaining ?. để truy cập an toàn

type Profile = {
  address?: {
    city?: string;
  };
};

const profile: Profile = {};
console.log(profile.address?.city); // undefined, không bị lỗi

?. dừng chuỗi truy cập và trả về undefined nếu giá trị bên trái là null hoặc undefined. Nó không che các lỗi khác và không kiểm tra toàn bộ object giúp bạn.

4. Toán tử ba ngôi ? : để chọn một trong hai giá trị

const score = 8;
// khai báo biến result: score >= 5 chứ? Nếu đúng, thì lưu giá trị Passed, nếu không lưu Failed vào biến
const result = score >= 5 ? "Passed" : "Failed";

console.log(result); // Passed

Cấu trúc là điều_kiện ? giá_trị_đúng : giá_trị_sai. Nó phù hợp cho lựa chọn ngắn; logic nhiều nhánh nên dùng if/else để dễ đọc.

5. Nullish coalescing ?? để đặt giá trị mặc định

const apiName = null;
// apiName đang null chứ? Nếu đúng thì lưu "Chưa có tên" vào biến displayName 
const displayName = apiName ?? "Chưa có tên";

console.log(displayName); // Chưa có tên

?? chỉ lấy vế phải khi vế trái là null hoặc undefined. Các giá trị hợp lệ như 0, false và chuỗi rỗng vẫn được giữ lại.

Bảng tóm tắt