面试题：TypeScript 可选链原理及应用

Question

请解释 TypeScript 中可选链（?.）运算符的原理，并举例说明在对象属性访问和函数调用场景下如何使用它来避免空值错误。

Answer 1

可选链（?.）运算符原理

可选链（?.）运算符是一种 JavaScript 和 TypeScript 中的操作符，用于在访问对象属性或调用对象方法时，若对象为 null 或 undefined，不会抛出错误，而是返回 undefined。它会在链式调用中，一旦遇到 null 或 undefined 值，就停止后续的链式操作并返回 undefined。

对象属性访问场景示例

interface User {
  address?: {
    city?: string;
  };
}

const user: User | undefined = undefined;
// 使用可选链操作符访问深层属性
const city = user?.address?.city; 
console.log(city); 

在上述示例中，user 可能是 undefined，如果直接写 user.address.city 会抛出错误。使用 ?. 后，若 user 为 undefined，表达式直接返回 undefined，不会尝试访问不存在的 address 和 city 属性，从而避免错误。

函数调用场景示例

interface User {
  getName?: () => string;
}

const user: User | undefined = undefined;
// 使用可选链操作符调用可能不存在的函数
const name = user?.getName?.(); 
console.log(name); 

这里 user 可能是 undefined，getName 方法也可能不存在。使用 ?. 操作符，若 user 为 undefined 或者 getName 不存在，表达式直接返回 undefined，不会尝试调用不存在的函数，避免了运行时错误。