Optional Chaining là một tính năng trong TypeScript (cũng như trong JavaScript) cho phép bạn truy cập các thuộc tính lồng nhau của một đối tượng một cách an toàn mà không cần kiểm tra sự tồn tại của từng thuộc tính. Khi một trong các thuộc tính không tồn tại (null hoặc undefined), Optional Chaining sẽ trả về undefined thay vì gây ra lỗi.
Optional Chaining được biểu thị bằng ký hiệu ?.. Tính năng này rất hữu ích khi làm việc với các đối tượng phức tạp, nơi có thể xảy ra nhiều cấp độ lồng nhau. Với Optional Chaining, bạn có thể giảm thiểu mã kiểm tra sự tồn tại của từng thuộc tính, giúp mã nguồn trở nên sạch sẽ và dễ đọc hơn.
interface User {
name: string;
address?: {
street: string;
city: string;
};
}
const user1: User = {
name: "Alice",
};
const user2: User = {
name: "Bob",
address: {
street: "123 Main St",
city: "New York",
},
};
console.log(user1.address?.street); // undefined
console.log(user2.address?.street); // "123 Main St"Trong ví dụ trên, khi truy cập user1.address?.street, mã trả về undefined mà không gây ra lỗi, vì user1 không có thuộc tính address.
Khi truy cập các thuộc tính lồng nhau, việc không kiểm tra sự tồn tại của từng thuộc tính có thể dẫn đến lỗi “TypeError: Cannot read property ‘…’ of undefined”. Optional Chaining giúp tránh những lỗi này một cách dễ dàng.
Optional Chaining giúp bạn viết mã ngắn gọn và dễ đọc hơn. Thay vì viết nhiều câu lệnh kiểm tra, bạn có thể sử dụng một cú pháp đơn giản với ?..
Bạn có thể sử dụng Optional Chaining để gọi các hàm có thể không tồn tại. Nếu hàm không tồn tại, mã sẽ không bị lỗi.
interface User {
name: string;
getAddress?: () => string;
}
const user1: User = {
name: "Alice",
};
const user2: User = {
name: "Bob",
getAddress: () => "123 Main St",
};
console.log(user1.getAddress?.()); // undefined
console.log(user2.getAddress?.()); // "123 Main St"Trong ví dụ này, nếu getAddress không tồn tại, user1.getAddress?.() sẽ trả về undefined.
Optional Chaining cũng hỗ trợ truy cập các thuộc tính của mảng. Ví dụ:
interface User {
name: string;
friends?: { name: string }[];
}
const user: User = {
name: "Alice",
friends: [{ name: "Bob" }],
};
console.log(user.friends?.[0]?.name); // "Bob"
console.log(user.friends?.[1]?.name); // undefineduser.friends?.[0]?.name trả về "Bob" vì friends có ít nhất một phần tử.user.friends?.[1]?.name trả về undefined vì không có phần tử thứ hai trong mảng.Optional Chaining là một tính năng mạnh mẽ trong TypeScript giúp bạn truy cập an toàn các thuộc tính lồng nhau của đối tượng mà không gặp lỗi khi thuộc tính không tồn tại. Nó giúp mã nguồn trở nên gọn gàng và dễ đọc hơn, đồng thời giảm thiểu lỗi phát sinh trong quá trình thực thi. Với tính năng này, bạn có thể viết mã một cách hiệu quả hơn trong các ứng dụng phức tạp.
