可选链操作符和非空断言的异同

可选链操作符和非空断言都是用于在 TypeScript 或 JavaScript 中处理可能为空的变量的。

可选链操作符（?.）是 TypeScript 3.7 引入的新特性，它可以在属性访问、方法调用等表达式中添加一个问号，在变量为空时直接返回 undefined。

例如：

const user = {
  name: 'Alice',
  address: {
    city: 'Beijing'
  }
}

const city = user.address?.city; // 如果 address 为 null 或 undefined，city 会被赋值为 undefined

非空断言（!）可以在变量名后面添加一个感叹号，表示该变量一定不为空，从而避免 TypeScript 的类型检查报错。

例如：

const user = {
  name: 'Alice',
  address: {
    city: 'Beijing'
  }
}

const city = user!.address!.city; // 如果 address 为 null 或 undefined，TypeScript 会报错，但加上 ! 后可以避免报错

尽管可选链操作符和非空断言都可以用于处理可能为空的变量，但它们的使用场景有所不同。可选链操作符通常用于对链式调用的变量进行访问，而非空断言通常用于对变量进行断言，表示该变量一定不为空。

相关问题

ua.match(/MicroMessenger/i) == "micromessenger"; ts中 类型校验出错， 如何用非空断言操作符 ！ 来解决

可以使用非空断言操作符 `!` 来解决类型校验出错的问题。在这个示例中，可以将 `ua.match(/MicroMessenger/i) == "micromessenger"` 的返回值类型从 `boolean` 改为 `string`，并使用非空断言操作符 `!` 表示这个值不可能为 `null` 或 `undefined`。修改后的代码如下：

const isWeChat = (ua: string): boolean => {
  return (ua.match(/MicroMessenger/i) || [])[0]?.toLowerCase() === "micromessenger";
};

if (isWeChat(navigator.userAgent)) {
  console.log("This is WeChat browser!");
} else {
  console.log("This is not WeChat browser!");
}

注意，使用非空断言操作符 `!` 时需要确保这个值不可能为 `null` 或 `undefined`，否则可能会导致运行时错误。在这个示例中，使用了可选链操作符 `?.` 来保证 `match()` 方法的返回值不可能为 `null` 或 `undefined`，从而避免了这个问题。