TypeScript条件语句下类型推断失效问题的解决方案咨询

问题原因 #

出现这个现象的核心原因是TypeScript的控制流类型分析不会追踪两个独立变量之间的逻辑关联：虽然三元表达式根据lucky的取值给random赋了不同类型的值，但赋值完成后，TS不会再把后续对lucky的条件判断和random的类型做绑定，这是TS类型分析的常规设计边界，不是bug。

问题复现代码：

declare const lucky: boolean;
declare const str: string;
declare const nil: null;

const random = lucky ? str : nil;
// random: string | null

if (lucky) {
  // random: string | null
  // 预期收窄为string
}

可行替代方案 #

• 变量声明下沉到条件分支内
  这是最符合TS分析逻辑的写法，不需要额外类型断言，TS能100%正确推断类型：

  declare const lucky: boolean;
  declare const str: string;
  declare const nil: null;
  
  if (lucky) {
    const random = str;
    // 此处random类型自动推断为string
  } else {
    const random = nil;
    // 此处random类型自动推断为null
  }
  

  如果需要在分支外使用random，可以将分支的执行结果赋值给外部变量，TS同样能正确推断外部变量的联合类型。

• 用带判别式的联合对象封装关联状态
  如果必须要在分支外提前拿到random变量，可以把布尔标记和对应值封装到同一个联合类型的对象中，TS对同个对象的判别式属性判断有完善的收窄支持：

  declare const str: string;
  declare const nil: null;
  
  const result = Math.random() > 0.5
    ? { isLucky: true as const, random: str }
    ? { isLucky: false as const, random: nil };
  
  // 分支外result.random类型为string | null
  if (result.isLucky) {
    // 此处result.random自动收窄为string
    const random = result.random;
  }
  

• 小范围使用类型断言
  适合不想调整现有代码结构、快速修复的场景，在确定逻辑正确的前提下，在分支内手动做类型收窄：

  declare const lucky: boolean;
  declare const str: string;
  declare const nil: null;
  
  const random = lucky ? str : nil;
  if (lucky) {
    const narrowedRandom = random as string;
    // 此处narrowedRandom类型为string
  }
  

  注意这种写法需要自行保证逻辑一致性，TS不会校验lucky取值和random类型的匹配关系，如果后续修改赋值逻辑忘记同步调整断言，会引入类型安全隐患。

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