React组件中循环前类型检查在循环内失效？是否需重复校验？

为什么会出现这个类型错误？ #

TypeScript的类型缩小是基于当前作用域的。你在循环前检查了props.someArray存在，但forEach的回调函数是独立作用域——TypeScript无法保证回调执行时，props.someArray没被外部修改（比如父组件重新渲染导致props更新为undefined），所以回调里props.someArray的类型仍为things[] | undefined，不符合someFunction的参数要求。

不需要在循环内重复检查，更优解决方法 #

把props.someArray赋值给局部变量，TypeScript会确认该变量在当前作用域内不会被修改，类型会被正确缩小为things[]，回调里直接用这个局部变量即可：

if (props.someArray) {
  const currentArray = props.someArray; // 局部变量锁定类型
  currentArray.forEach((element, i) => {
    someFunction(i, element, currentArray); // 无类型错误
  });
}

为什么局部变量能解决问题？ #

局部变量的作用域仅限于当前if块内，TypeScript可以确定forEach执行期间，这个变量不会被外部修改（除非你主动在回调里修改它，但这里不会这么做），所以它的类型会一直保持为things[]，无需额外检查。

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