只有一个'?' 属性 在我的情况下使用 TypeScript 可选链接就足够了

Question

在我的 React 和 TypeScript（版本 "^3.9.9"）应用程序中，我正在映射一些项目以呈现 list/teasers:

    {data?.getItems.items
      .map((teaser) => (
        <Teaser
          key={teaser.id}
          title={teaser.extraData?.title || video.title}
          label={teaser.extraData?.label}
        />
      ))}

extraData 对象可以使用来自 api 的 Graphql 查询为空。我正在使用 Typescripts Optional chaining.

添加 teaser.extraData?.title.

足以防止我的应用程序崩溃

但是teaser?.extraData?.title和teaser.extraData?.title有什么区别，我应该用什么才安全？

Answer 1

But what is the difference between teaser?.extraData?.title and teaser.extraData?.title and what should I use to be safe?

如果 teaser 本身是 null 或 undefined（统称为“nullish”），第一个将计算为 undefined 而不会出现错误。在这种情况下，第二个会抛出一个错误，因为你已经从 teaser.

链接了 (non-optionally)

可选链的工作方式，整个 属性 访问操作是 short-circuited（导致 undefined）在可选链 if 可选链之前的东西是 null 或 undefined.

所以在你的例子中，显然 teaser 总是 non-nullish，但 teaser.extraData 有时是无效的。因此，在这种特定情况下，您只需要 teaser.extraData 之后的可选链接，而不是 teaser。

---

旁注：Optional chaining 现在是 JavaScript 的一部分，它在被所有主要引擎原生实现后被添加到 ES2020 规范中。不仅仅是 TypeScript（不再）。