TypeScript 中的 “非空连锁” 运算符：解决 null 错误-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，null 和 undefined 是常见的错误源。当你处理数据时，假如没有正确的检查 null 或者 undefined 值，那么代码就会抛出错误，导致应用程序崩溃。

TypeScript 团队于 2019 年引入了一个新的运算符，即“非空连锁”运算符，能够有效地解决这些问题。

什么是非空链运算符

非空链 (Optional Chaining) 运算符是一个新的 ECMAScript 2020 标准。在视图访问深度嵌套的对象属性的时候，我们经常会写类似于下面的代码：

if (obj && obj.a && obj.a.b && obj.a.b.c) {
  // ...
}

这样的代码非常丑陋且具有侵入性，但是通过使用非空链运算符，我们可以简化代码。

if (obj?.a?.b?.c) {
  // ...
}

这里，如果 obj 或 obj 的某个属性为 falsy 值（例如 null、undefined、NaN、0 或 ""），表达式就会返回 undefined，否则就会返回 obj.a.b.c。

코드实现

下面，我们来看一个例子，非空链运算符如何避免抛出错误。

// javascriptcn.com 代码示例
interface Person {
  name: string;
  address?: {
    street?: {
      name?: string;
    };
  };
}

function getStreetName(person: Person): string | undefined {
  return person.address?.street?.name;
}

这里，我们定义了一个包含嵌套对象的 TypeScript 接口 Person，并且定义了一个函数 getStreetName，该函数返回 person.address?.street?.name，如果这个值不存在，则返回 undefined。通过使用非空链运算符，我们不需要通过每个属性进行空值检查。

转换旧代码

如果你的代码库很大，并且在 TypeScript 中使用旧的对象类型，则可以通过使用类型推断来轻松转换代码。下面是一个将旧代码转换成使用“非空链”运算符的示例。

// javascriptcn.com 代码示例
interface Person {
  name: string;
  address?: {
    street?: {
      name?: string;
    };
  };
}

interface OldPerson {
  name: string;
  address: OldAddress | null;
}

interface OldAddress {
  street: OldStreet | null;
}

interface OldStreet {
  name: string;
}

function toNew(person: OldPerson): Person {
  return {
    name: person.name,
    address: person.address?.street
      ? { street: { name: person.address.street.name } }
      : undefined,
  };
}

在这个例子中，我们首先定义了一个名为 OldPerson 的 TypeScript 接口，它使用了之前的嵌套对象类型。接下来，我们定义了一个名为 toNew 的转换函数，且使用新的格式，该函数接受一个 OldPerson 作为参数，并返回一个新的 Person。

在 toNew 函数中，我们使用非空链运算符来处理嵌套属性的问题。如果 person.address 和 person.address.street 都不为 null，则返回地址，否则返回 undefined。

总结

在 TypeScript 编程中，使用非空链运算符可以简化代码并提高安全性。它可以避免掉入 null 的陷阱，同时也能帮助你更轻松地阅读和维护代码。在你的下一个 TypeScript 项目中，尝试使用这些新的运算符，看看它们如何帮助你编写更可靠的代码。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6549e0d87d4982a6eb416ba6