迹忆客 专注技术分享

问号点 ?. 语法在 TypeScript 中称为可选链接，就像使用点表示法访问对象的嵌套属性一样，但如果引用为空，它不会导致错误，而是短路返回未定义。

type Person = {
  address?: {
    country?: string;
  };

  name?: {
    first?: string;
  };
};

const person: Person = {
  address: {
    country: 'Chile',
  },
};

console.log(person.address?.country); // 👉️ "Chile"

console.log(person.name?.first); // 👉️ undefined

我们创建了一个类型，其中地址和名称属性是可选的。

大多数情况下，您将从数据库中获取此数据或从文件中读取数据，其中某些属性可能没有值。

第一个 console.log 语句使用可选的链接 (?.) 运算符来访问 person 对象的 address.country 属性。

因为 address.country 属性存在于 person 对象上，所以它的值被记录到控制台。

第二个示例使用可选链接 (?.) 运算符访问 person 对象上的 name.first 属性，但由于该属性在对象上不存在，可选链接 (?.) 运算符返回 undefined。

每当我们尝试使用 nullish（null 或 undefined）引用访问属性时，可选的链接运算符 (?.) 会短路返回 undefined 而不是抛出错误。

如果我们没有使用可选链操作符，我们会得到一个错误，因为我们试图访问一个 undefined 值的属性。

type Person = {
  address?: {
    country?: string;
  };

  name?: {
    first?: string;
  };
};

const person: Person = {
  address: {
    country: 'Chile',
  },
};


// ⛔️ ERROR: Cannot read properties of undefined (reading 'first')
console.log(person.name.first); // 👉️ undefined

如果未设置 name 属性，我们没有使用可选链接 (?.) 运算符进行短路，因此出现错误。

我们过去可能使用过逻辑 AND (&&) 运算符来解决此问题。

type Person = {
  address?: {
    country?: string;
  };

  name?: {
    first?: string;
  };
};

const person: Person = {
  address: {
    country: 'Chile',
  },
};

console.log(person.name && person.name.first); // 👉️ undefined

我们使用逻辑 AND (&&) 运算符来检查访问 person 对象上的 name 属性是否返回真值，如果是，我们可以尝试访问 name 对象上的第一个属性。

这与使用可选链接有点不同，因为它检查引用是否真实，而可选链接 (?.) 运算符检查引用是否为空或未定义。

如果引用为 null 或 undefined，可选的链接运算符也可用于访问特定索引或短路处的数组元素。

type Person = {
  numbers?: {
    low?: number[];
  };
};

const person: Person = {};

console.log(person.numbers?.low?.[0]); // 👉️ undefined

low 属性可能未定义，因此尝试访问未定义值的索引 0 处的数组元素会引发错误，除非我们使用可选链接 (?.) 运算符在引用未定义的情况下进行短路。

如果在对象上填充了属性，则可选的链接运算符将返回数组中的特定值。

type Person = {
  numbers?: {
    low?: number[];
  };
};

const person: Person = {
  numbers: {
    low: [1, 2, 3],
  },
};

console.log(person.numbers?.low?.[0]); // 👉️ 1

如果函数的值不等于 null 或 undefined，则可选链 (?.) 运算符也可用于调用函数。

function logger(callback?: (msg: string) => void) {
  callback?.('hello');
}

logger(console.log); // 👉️ "hello"

如果未提供回调参数，尝试调用回调参数将导致错误，因此我们使用可选链接 (?.) 运算符在调用函数之前检查引用是否为 null 或 undefined。

如果未提供参数，则操作员只会短路返回 undefined 而不是调用函数。