TypeScript创建仅单值差异的联合类型Payload报错，求修复方案

问题原因 #

这段代码的核心问题在于：当你直接创建对象字面量并指定PayloadTypeA | PayloadTypeB类型时，TypeScript会要求该字面量同时满足联合类型所有成员的结构约束。但PayloadTypeA的value固定为'x'，PayloadTypeB的value固定为'y'，一个对象不可能同时满足这两个互斥的value要求，因此编译器抛出类型不兼容错误。

另外，你对propsValue做的as TypeA | TypeB断言无效——TypeA | TypeB的value类型是'x' | 'y'，并没有帮助TypeScript将整个对象的类型窄化到联合类型的具体成员。

修复方案 #

方案1：条件分支自动窄化类型（推荐）

利用TypeScript的控制流分析，根据propsValue的具体值分场景创建payload，编译器会自动推断每个分支的类型，最终生成合法的联合类型：

type PayloadTypeA = {
  value: 'x';
  dataA: [];
  dataB: {};
};

type PayloadTypeB = {
  value: 'y';
  dataA: [];
  dataB: {};
};

// 复用Payload的value类型定义Props
type Props = { value: PayloadTypeA['value'] | PayloadTypeB['value'] };
const props: Props = /* 你的props实例 */;

const payload: PayloadTypeA | PayloadTypeB = props.value === 'x' 
  ? { value: 'x', dataA: [], dataB: {} } 
  : { value: 'y', dataA: [], dataB: {} };

方案2：直接断言整个对象（简单场景适用）

如果不想编写分支逻辑，可以直接将整个对象断言为目标联合类型（注意：这种方式会跳过部分类型检查，需确保业务逻辑正确）：

// 省略重复类型定义...
const propsValue = props.value;

const payload = {
  value: propsValue,
  dataA: [],
  dataB: {}
} as PayloadTypeA | PayloadTypeB;

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