TypeScript中props.item已判空却仅在find中报未定义错误的原因

问题重现 #

以下代码中，TypeScript仅在find方法的回调行抛出props.item可能未定义的错误，但后续直接访问props.item的return语句却无报错：

interface Props {
  item?: SomeItem;
}

export const Element = (props: Props) => {
  if (props.item === undefined) {
    return null;
  }

  // 此处报错：TS18048: 'props.item' is possibly 'undefined'
  const offer = offers.find((offer) => offer.id === props.item.offer_id);

  // 此处无报错
  return <div>{props.item.getPayoutPlaceholder()}</div>; 
};

将props.item赋值给常量后使用，错误消失：

const item = props.item;
if (item === undefined) {
  return null;
}

// 无报错
const offer = offers.find((offer) => offer.id === item.offer_id);

核心原因 #

这是TypeScript类型收窄机制的特性导致的：

• 同步执行流中的属性访问：在return语句所在的同步代码块里，TypeScript能通过前面的if判断确认props.item已被排除undefined的可能，且当前函数执行期间props作为函数参数，其属性不会被同步修改，因此可以安全访问。
• 回调函数中的属性访问：find的回调函数属于嵌套作用域，TypeScript无法保证在回调执行时，props.item的取值和外层判断时一致——尽管在React组件中props是只读的，但TypeScript的类型检查器不会针对React的特性做特殊处理，它仅从语法层面判断：对象的属性可能在外部被修改，因此无法将外层的类型收窄结果延伸到回调函数中。
• 常量赋值后的访问：当把props.item赋值给const声明的变量后，这个变量在当前作用域是不可变的。TypeScript可以确定，即使在回调函数中访问，该变量的值也不会发生变化，因此能正确保留收窄后的非undefined类型。

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