为什么Typescript条件判断存变量报错，直接写在if里正常？

问题原因 #

这是TypeScript 控制流类型收窄（Narrowing） 的设计限制导致的：

• 示例1直接将类型校验逻辑写在if的判断条件中，TS的控制流分析可以直接识别该判断的作用是过滤payload的类型：只要通过了这个if判断还没有返回，就说明payload一定不存在null/undefined、不是string类型、且包含color属性，会自动将payload的类型收窄为符合Variable要求的类型，因此调用createVariable不会报错。
• 示例2将判断逻辑提前赋值给了isNotAVariable布尔变量，当前版本的TypeScript不会跟踪普通布尔变量和原变量类型的关联关系：TS只会将isNotAVariable标记为普通的boolean类型，不会记住“该变量为true时payload不符合Variable要求，为false时符合”的对应关系，因此走完if(isNotAVariable) return的逻辑后，TS没有对payload做类型收窄，依旧保留了最初的联合类型，调用函数时就抛出了类型不匹配的错误。

解决方案 #

如果需要抽离判断逻辑复用，可以自定义类型谓词实现类型收窄，示例如下：

function isVariable(payload: unknown): payload is Variable {
  return payload != null && typeof payload !== "string" && "color" in payload
}

// 使用时
case "CREATE_VARIABLE":
  if (!isVariable(payload)) return state;
  return createVariable(state, payload);

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