TypeScript中常规函数与函数表达式的类型收窄行为差异解析

先看第一个代码场景：

function foo(item: string | null) {
  if (!item) return null
  return () => {
    function regular() {
      return item
    }
    const arrow = () => item
    console.log(regular().toLowerCase()) // Error: Object is possibly 'null'.
    console.log(arrow().toLowerCase()) // Pass
  }
}

在foo函数中，嵌套了常规函数regular和箭头函数arrow，两者都返回外部作用域的item。按预期，经过if (!item) return null的类型收窄，item应该被推断为string，但实际regular()的返回类型仍为string | null，触发类型错误，而arrow()则能正常通过检查。

最初怀疑是参数item可变导致的问题，于是将其转为不可变的const变量，但问题依旧：

function foo(item: string | null) {
  const itemCopy = item // 试图让TypeScript识别其不可变性
  if (!itemCopy) return null
  return () => {
    function regular() {
      return itemCopy
    }
    const arrow = () => itemCopy
    console.log(regular().toLowerCase()) // Error: Object is possibly 'null'.
    console.log(arrow().toLowerCase()) // Pass
  }
}

进一步测试发现，问题和箭头函数无关，换成常规函数表达式也能正常通过检查，只有**函数声明（常规函数）**会出现类型收窄失效：

function foo(item: string | null) {
  if (!item) return null
  return () => {
    function regular() {
      return item
    }
    const exp = function () { // 仅函数声明和函数表达式的差异
      return item
    }
    console.log(regular().toLowerCase()) // Error: Object is possibly 'null'.
    console.log(exp().toLowerCase()) // Pass
  }
}

疑问 #

为什么会出现这种类型推断的差异？该行为是TypeScript的设计意图吗？

解答 #

这是TypeScript的设计行为，差异根源在于函数声明与函数表达式/箭头函数的类型推断逻辑不同：

• 函数声明的提升特性：function regular() {}这类函数声明会被提升到当前作用域顶部。TypeScript推断其返回类型时，只会基于作用域的初始类型信息，不会考虑后续代码执行流中的类型收窄。也就是说，regular被提升后，它引用的item会被视为未收窄的string | null，哪怕后续已经通过if排除了null的可能。

• 函数表达式/箭头函数的即时推断：函数表达式（const exp = function() {}）和箭头函数不会被提升，它们的类型推断是在代码执行到定义位置时进行的。此时外部的item已经完成类型收窄，TypeScript能正确识别其类型为string，所以返回类型推断正确。

这种行为是TypeScript的设计意图——为了保持函数声明提升的语义一致性，避免执行流中的类型收窄改变提升后函数的类型推断结果，减少类型不一致的潜在问题。

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