TypeScript依赖布尔值的联合类型收窄问题解决方案

你当前的写法运行时逻辑完全可行，出现类型错误的核心原因是：TypeScript的控制流类型分析不会自动跨表达式/跨函数调用，追踪外部变量isActive和useSelector返回值之间的绑定关系。TS只知道componentState是ActiveType | PassiveType的联合类型，无法感知到isActive === true时它一定是ActiveType、反之一定是PassiveType的逻辑关联，所以访问类型独有属性时会抛错。

按推荐优先级从高到低排列：

• 方案1：使用可辨识联合（类型标记绑定到数据本身）
  这是最可靠、最符合TS设计思路的方案，不需要依赖外部变量做类型判断，直接把类型区分标记挂到返回的state对象上：

  // 给两个类型加共同的字面量标记字段
  type ActiveType = {
    type: 'active';
    active_id: string;
    // 其余活跃态业务字段
  }
  type PassiveType = {
    type: 'passive';
    passive_id: string;
    // 其余被动态业务字段
  }
  
  // 后续直接判断对象自身的标记字段，TS会自动收窄类型
  if (componentState.type === 'active') {
    // 此分支下TS自动推导componentState为ActiveType，可直接访问active_id
    console.log(componentState.active_id)
  } else {
    // 此分支下自动推导为PassiveType
    console.log(componentState.passive_id)
  }
  

  这种写法完全避免了外部变量和数据状态不同步导致的类型判断错误，哪怕后续逻辑调整、isActive和state的对应关系改动，类型判断依然有效。

• 方案2：分支内做有限范围的类型断言
  如果暂时没法调整state结构加类型标记，可以在你判断isActive的分支内，对componentState做对应类型的断言，注意断言范围要尽可能小，不要做全局的类型强制：

  if (isActive) {
    const activeState = componentState as ActiveType;
    // 正常访问activeState的专属属性
    console.log(activeState.active_id)
  } else {
    const passiveState = componentState as PassiveType;
    // 正常访问passiveState的专属属性
    console.log(passiveState.passive_id)
  }
  

  这种方案的缺点是需要人工保证逻辑对应关系，如果后续修改selector的返回逻辑、没有同步修改分支断言，会埋下运行时错误的隐患。

• 方案3：封装带类型关联的自定义hook
  如果这类场景在项目里大量复用，可以封装一个自定义hook，通过条件类型让返回值和传入的isActive参数做类型绑定：

  function useComponentState(isActive: boolean) {
    return useSelector((state: RootState) => 
      isActive ? selectActiveObj(state) : selectPassiveObj(state)
    ) as typeof isActive extends true ? ActiveType : PassiveType;
  }
  
  // 使用时，传入固定布尔值的情况下，TS会自动推导对应类型
  const activeState = useComponentState(true); // 类型为ActiveType
  const passiveState = useComponentState(false); // 类型为PassiveType
  

  注意如果isActive是组件内动态变化的布尔变量，这个方案依然没法自动收窄，还是需要配合前两种方案使用。

不推荐为了绕过类型报错直接把componentState断言为any或者随意做类型交叉，会彻底丢失类型校验的价值。

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