为何TypeScript数组索引访问的类型收窄失效，赋值变量则生效？

先看你的类型定义和问题代码：

type Soccer = { ball: string }
type Basketball = { jump: string }
type Data = Soccer[] | Basketball[]

// 类型守卫不生效
if ('ball' in data[index]) {
  <MyComponent something={data[index]} /> // data[index]仍为Soccer | Basketball
}

// 赋值给变量后类型收窄正常工作
const resultObj = data[index]
if ('ball' in resultObj) {
  <MyComponent resultObj={resultObj} /> // resultObj被收窄为Soccer
}

这本质是TypeScript控制流分析的跟踪范围限制导致的：

• 当你直接用data[index]做类型检查时，TypeScript没办法把这次检查的结果关联到后续的data[index]访问上。虽然你的Data类型是“全Soccer数组”或“全Basketball数组”的联合，但TypeScript的静态分析不会默认假设数组是不可变的——它会认为两次访问data[index]时，这个元素的类型可能发生变化（哪怕你代码里根本没修改数组）。所以它无法通过单次索引检查，就把整个数组的类型收窄为Soccer[]，也没法保证后续的data[index]和之前检查的是同一个类型。

• 而把data[index]赋值给常量resultObj后，这个变量是一个固定的引用，TypeScript可以精准跟踪它的类型。一旦通过'ball' in resultObj确认它属于Soccer，后续使用resultObj时，TypeScript就会认定它的类型已经被收窄，不会再回到联合类型。

至于直接在条件中传递data[index]不生效，原因和第一种情况一致：TypeScript不会把条件里的索引访问的类型推断，自动传递给props里的同一个索引访问表达式——这两次访问在它看来是独立的动态操作，没法关联类型。

简单总结：TypeScript对变量的类型跟踪远比对数组索引访问这类动态表达式的跟踪更可靠。把索引结果存到变量里，相当于给TypeScript一个明确的“跟踪锚点”，让它能正确完成类型收窄。

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