为何`booleanValue`与`booleanValue === true`会影响TypeScript类型推断？

问题场景 #

下面的代码里，直接用isAllowed作为判断条件时，TypeScript能正确推断element不为null；但加上=== true后，推断就失效了，这是为什么？

function someFunction(element: HTMLElement | null) {
  const isAllowed = element !== null;

  if (isAllowed) {
    // 这里TypeScript能推断element不是null
    thisFunctionRequiresAnElement(element);
  }

  if (isAllowed === true) {
    // 这里无法推断element不是null
    thisFunctionRequiresAnElement(element);
  }
}

function thisFunctionRequiresAnElement(element: HTMLElement) {
  console.log(element);
}

核心原因 #

TypeScript的控制流分析是通过追踪变量的推导关系来实现类型窄化的：

• 当你写const isAllowed = element !== null时，TypeScript会记录isAllowed的布尔值和element是否为null直接绑定——isAllowed为true等价于element !== null。所以进入if (isAllowed)分支时，编译器能直接回溯到element的非null状态，完成类型窄化。
• 但当你写isAllowed === true时，TypeScript只会把这个表达式看作对isAllowed本身的布尔值检查，不会关联它背后的推导逻辑。它不会把isAllowed === true等价于element !== null，自然也就无法对element的类型进行窄化。

简单说：直接用变量做条件时，编译器会保留变量和原表达式的关联；显式和true比较时，这个关联被切断了，编译器只认变量的表面类型，不追溯它的由来。

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