是什么 ？。TypeScript 中的运算符

作者

可选的链接 ?. TypeScript 中的运算符

What is the ?. operator in TypeScript

问号点 (?.) 语法在 TypeScript 中称为可选链接，类似于使用点表示法访问对象的嵌套属性，但如果引用为空，它不会导致错误，而是短路返回undefined.

索引.ts
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

我们创建了一个类型，其中address和name属性是可选的。

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

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

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

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

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

如果我们不使用可选的链接运算符，我们会得到一个错误，因为我们试图访问一个undefined值的属性。

索引.ts
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属性未设置，所以我们得到了一个错误。

您过去可能使用逻辑与 (&&) 运算符来解决这个问题。

索引.ts
type Person = {
  address?: {
    country?: string;
  };

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

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

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

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

这与使用可选链接有点不同，因为它检查引用是否为真，而可选链接 (?.) 运算符检查引用是否为nullor undefined。

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

索引.ts
type Person = {
  numbers?: {
    low?: number[];
  };
};

const person: Person = {};

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

该low属性可能是undefined，因此尝试访问值索引处的数组元素0会undefined引发错误，除非我们使用可选的链接 (?.) 运算符在引用为 时短路
undefined。

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

索引.ts
type Person = {
  numbers?: {
    low?: number[];
  };
};

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

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

可选链 (?.) 运算符也可用于在其值不等于nullor时调用函数undefined。

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

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

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

如果没有提供参数，操作符只会短路返回undefined而不是调用函数。

–

发表评论