使用React和TypeScript的Nullish凝聚力

上一篇文章介绍了我们如何在React和TypeScript应用程序中使用可选链来缩短我们的代码。Nullish凝聚是另一个优秀的JavaScript新特性，可以帮助我们改善React和TypeScript应用程序。让我们来看看这个功能是什么，以及它在React和TypeScript应用中的作用。

一个简单的组件

让我们从一个简单的组件开始：

type Person = {
  name: string,
  subscription?: Subscription
};
type Subscription = {
  amount: number
};
type Props = {
  person: Person
};
const PersonCard: React.FC<Props> = ({
  person
}) => {
  return (
    <div>
      <div>
        <span>Name: </span>
        <span>{person.name}</span>
      </div>
      <div>
        <span>Subscription amount: </span>
        <span>
          {person.subscription?.amount}        </span>
      </div>
    </div>
  );
};

我们在高亮线上使用了可选链，这样我们在渲染订阅金额时就不会出现错误。然而，假设我们想在这个人没有订阅的情况下呈现*"没有订阅"*。我们可以使用类似这样的东西：

<span>
  {person.subscription?.amount ||
    "No subscription"}
</span>

然而，如果这个人有一个订阅，但它是免费的呢？- 即：person.subscription.amount 是0 。在这种情况下，*"没有订阅 "*会被呈现出来，因为0 是一个错误的值。

使用nullish coalescing

nullish凝聚的方法看起来非常相似：

<span>
  {person.subscription?.amount ??
    "No subscription"}
</span>

请注意nullish凝聚操作符(??)。如果左边的操作数是null 或undefined ，它就会渲染右边的操作数。因此，它比|| 更加精确，而且在我们的案例中，它恰恰是我们想要的，解决了免费订阅的问题。

我现在可以使用nullish凝聚了吗？

可以，如果你运行的是React和TypeScript的最新版本：

• TypeScript 3.7支持nullish coalescing
• Babel 7.8.0支持nullish凝聚。
• 用create react app 3.3.0创建的项目也支持nullish coalescing!