为何使用array?.length仍会提示array可能为undefined？

先看这段代码：

interface Obj {
  array?: string[]
}

function fuu(obj: Obj) {
  const { array } = obj
  if (array?.length >= 1) {
    // ...
  }
}

为什么会报错？ #

你猜的没错，核心原因是>=运算符要求两侧都是确定的有效值。array?.length的类型是number | undefined——当array为undefined时，可选链会返回undefined，而undefined >= 1属于非法的类型运算，TypeScript会严格检测这种潜在问题，所以会抛出提示。可选链只是避免了运行时的Cannot read property 'length' of undefined错误，但不会自动把undefined从表达式的类型中排除，所以TS依然会认为这里存在风险。

除了提到的两种方法，还有这些解决方式： #

• 非空断言：如果你能100%确定array在这个判断分支里不可能是undefined，可以用!断言排除undefined类型：

if (array!.length >= 1) {
  // ...
}

注意：非空断言是开发者手动保证类型安全，滥用会导致运行时错误。

• 用Array.isArray收窄类型：通过数组类型判断，让TS明确array是数组类型，自然可以安全访问length：

if (Array.isArray(array) && array.length >= 1) {
  // ...
}

• 空值合并运算符配合可选链：给array?.length设置默认值0，确保表达式结果始终是number类型：

if ((array?.length ?? 0) >= 1) {
  // ...
}

内容的提问来源于stack exchange，提问作者TrySpace