TypeScript报错解惑：Object可能为undefined及length属性不存在问题

嘿，我来帮你拆解这两个TypeScript报错的核心原因，以及为什么改写后的代码能顺利解决问题～

第一个报错：Object is possibly 'undefined' #

你可能会疑惑，明明已经写了data[card.key] && ...的前置判断，为什么TypeScript还是认为后面的data[card.key]可能是undefined？

这是因为TypeScript的控制流分析在短表达式里的追踪能力有限。在你的原代码中：

const filteredCards = cards.filter(card => (card.allData || (data[card.key] && data[card.key].length)))

虽然逻辑上第一个data[card.key]已经判断了它非undefined，但TypeScript不会把这个判断“传递”到同一个&&表达式的后半段——因为data[card.key]是动态属性访问，编译器没办法百分百确定两次访问的是同一个非undefined值（虽然我们实际运行时知道是，但静态分析有它的局限）。所以它依然会认为后面的data[card.key]可能是undefined，从而抛出报错。

第二个报错：Property 'length' does not exist on type 'string | any[] | IPerson' #

这个报错的根源是你定义的data类型：[key: string]: string | IPerson | Array<any> | undefined。

TypeScript严格遵循你定义的类型，它知道data[card.key]可能是IPerson类型，而IPerson并没有length属性。虽然你觉得运行时如果是IPerson的话，data[card.key].length会是undefined，filter会自动过滤掉，但TypeScript是编译期检查，它不允许你访问一个可能不存在的属性，不管运行时会不会被过滤。

为什么改写后的代码能解决问题？ #

来看你改写后的代码：

const filteredCards = cards.filter(card => { 
  if (card.allData) return true 
  const subData = data[card.key] 
  if (subData && Array.isArray(subData)) 
    if (subData.length) return true 
  return false 
})

这里有两个关键改进：

1. 变量赋值实现类型窄化追踪：把data[card.key]赋值给了subData变量后，TypeScript的控制流分析可以完整追踪这个变量的类型变化。当你判断subData && Array.isArray(subData)时，编译器会把subData的类型窄化为any[]，此时访问subData.length完全符合类型定义，不会再报错。同时，subData已经被判断为非undefined，自然也不会再出现第一个报错。
2. 明确过滤非数组类型：你通过Array.isArray(subData)明确限定了只处理数组类型，排除了IPerson和字符串的情况，直接解决了length属性不存在的类型问题。

如果你的需求里也需要保留“非空字符串”的过滤逻辑，可以把判断调整为：

if (subData && (Array.isArray(subData) || typeof subData === 'string')) {
  return subData.length > 0
}

这样就能同时处理数组和字符串的非空判断啦。

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