可选链接打字稿上的对象可能是“未定义”错误答案

【问题标题】：Object is possibly 'undefined' Error on Optional Chaining Typescript可选链接打字稿上的对象可能是“未定义”错误
【发布时间】：2021-02-03 06:14:56
【问题描述】：

我有一个正在访问的回复：data?.currentOrganization?.onboardingSteps?。您可以猜到，data、currentOrganization 和 onboardingSteps 可能都为空。我想分配一个变量如下：

const hasSteps = data?.currentOrganization?.onboardingSteps?.length > 0;

我认为如果任何字段为空或少于 1 步，hasValue 将评估为 false。但是，我收到 TypeScript 错误：Object is possibly 'undefined'。

这就是我目前的解决方法：

const hasSteps =
  data?.currentOrganization?.onboardingSteps != null &&
  data?.currentOrganization?.onboardingSteps?.length > 0;

这感觉不必要地冗长。有没有其他更优雅的解决方案？

【问题讨论】：

标签： javascript typescript boolean optional-chaining

【解决方案1】：

optional chain 最终会为 data?.currentOrganization?.onboardingSteps?.length 生成一个值，如果链中的所有内容都不是 null 或 undefined.... 但如果链中的任何内容为无效，则该值可能是 number ，那么输出将是 undefined 本身。你不能在没有 Typescript 抱怨的情况下测试 undefined > 0。

因此，您可能应该执行以下操作：

const hasSteps = (data?.currentOrganization?.onboardingSteps?.length ?? 0) > 0;

如果可选链以undefined 结尾，则使用nullish coalescing 生成0。

Playground link to code

【讨论】：

不幸的是，如果你把它放在 if 语句中，Typscript 不会推断 data/currentOrganization/etc 已定义，不像前身 data && data.currentOrganization 等，它会满足空/未定义类型检查，并允许您访问 if 块中的这些属性。有什么方法可以使这个策略发挥作用？
对一个老问题的评论部分不是这样做的好地方，但是：检查x > 0 不能作为x 的类型保护，但typeof x === "number" 可以，所以你可以写if (typeof data?.currentOrganization?.onboardingSteps?.length === "number") 然后编译器应该允许你分别访问所有的中间属性。如果您想进一步讨论，您可能想通过minimal reproducible example 发布您自己的问题。祝你好运！
undefined > 0 是在任何 JavaScript 引擎上产生 false 的有效表达式。目前尚不清楚为什么它在 TypeScript 中失败。
看起来你想要github.com/microsoft/TypeScript/issues/45543。请注意，“它在 JS 中工作，所以它应该在 TS 中工作”并不能说服 TS 团队。见stackoverflow.com/q/41750390/2887218。这个论点需要更像“x > 0 这样的比较，其中x 可能是undefined 在惯用的真实世界 JavaScript 中被广泛使用”，以及支持证据。