TypeScript嵌套联合类型赋值报错原因及精简解决方法

报错原因解释 #

该报错是TypeScript类型分发机制的限制导致的：
TypeScript不会自动将「字段值为联合类型的对象」识别为对应结构的联合类型。你的A类型是{attr: B1} | {attr: B2}的联合类型，而你返回的{attr: b()}结构中，attr的类型是B = B1 | B2，TS会逐分支比对该结构是否符合A的要求：

• 比对A1分支时，B1 | B2不能直接赋值给B1
• 比对A2分支时，B1 | B2也不能直接赋值给B2
  因此触发了类型不兼容的报错，你的业务逻辑本身没有问题，只是TS的推导能力暂时覆盖不到这种场景。

最简可行方案 #

下面按精简优先级给出可用方案：

方案1：直接加类型断言（最省事） #

只要你确定业务逻辑没有问题，直接给返回值加as A断言即可，一行代码解决：

function a(): A {
  return {
    attr: b()
  } as A
}

方案2：调整A的类型定义 #

如果业务上A的attr本身就允许是B的联合类型，可以直接修改A的定义，不需要修改任何函数代码：

// 替换原来的A类型定义即可
type A = {
  attr: B
}

方案3：简化类型守卫写法 #

如果你不想用类型断言，也不想写两个单独的类型判断函数，可以用通用类型守卫简化代码：

// 通用类型守卫，不用针对每个子类型写单独判断
function isBType<T extends B['attr']>(b: B, type: T): b is Extract<B, {attr: T}> {
  return b.attr === type
}

function a(): A {
  const bVal = b();
  if (isBType(bVal, "B1")) {
    return { attr: bVal }
  }
  return { attr: bVal }
}

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