TypeScript联合类型$type属性类型不兼容问题解决方案

解决方案 #

基础类型定义

先统一基础类型和映射关系，避免重复定义：

interface TypeAServerResponse {
  somefield: string,
  otherfield: string,
}

interface TypeBServerResponse {
  somefield: string,
}

type TypeServerResponseUnion = TypeAServerResponse | TypeBServerResponse;

interface TypeA extends TypeAServerResponse{
  $type: 'a',
}

interface TypeB extends TypeBServerResponse{
  $type: 'b',
}

type TypeUnion = TypeA | TypeB;
type TypeTag = TypeUnion['$type']; // 提取标签联合类型 'a'|'b'
type TypeMap = { a: TypeA; b: TypeB }; // 标签到对应类型的映射

场景1：明确知晓请求类型，直接传入$type

通过泛型约束传入的标签和返回类型严格绑定，类型安全无多余强制转换：

const serverGet = () : TypeServerResponseUnion => {
  return {somefield: 'something'}
}

const parseWithKnownType = <T extends TypeTag>(type: T): TypeMap[T] => {
  const response = serverGet();
  // 此处断言是安全的：业务上保证传入type=a时，接口返回TypeAServerResponse结构
  return { ...response, $type: type } as TypeMap[T];
};

// 使用示例
const dataA = parseWithKnownType('a'); // 自动推导为TypeA，可直接访问otherfield
const dataB = parseWithKnownType('b'); // 自动推导为TypeB

场景2：根据已有实例类型解析新请求

用泛型捕获入参的具体子类型，保证返回值和原实例类型一致，从根源避免标签类型被拓宽为联合类型：

const get = <T extends TypeUnion>(original: T): T => {
  const response = serverGet();
  // 此处断言是安全的：业务上保证同类型请求返回结构一致
  return { ...response, $type: original.$type } as T;
};

该实现不会触发类型错误，且类型推导完全符合预期：传入TypeA实例时返回值自动推导为TypeA，传入TypeB实例时返回值自动推导为TypeB。

延伸问题原因说明 #

两种写法类型检查结果不同，核心是TypeScript的检查规则差异，以及缺少泛型导致的类型关联丢失：

1. 对象字面量直接赋值的报错原因
   当直接写{...response, $type: original.$type}并标注为TypeUnion时，TS会先独立推导这个对象字面量的类型：

   • response是TypeServerResponseUnion，展开后结构为{somefield: string, otherfield?: string}
   • 无泛型约束时，original.$type会被推导为宽泛的联合类型'a' | 'b'
   • 组合后的对象类型为{somefield: string, otherfield?: string, $type: 'a'|'b'}
     这个类型无法匹配TypeUnion的要求：TypeA要求$type固定为'a'且必须存在otherfield，TypeB要求$type固定为'b'，推导出来的对象标签类型不确定、otherfield可选，自然会报类型不兼容错误。

2. 先断言再赋值不报错的原因
   当你先写const parsedResponse: TypeUnion = {} as TypeUnion时，本质是通过类型断言欺骗TS，让TS认为空对象已经符合TypeUnion结构。后续给parsedResponse.$type赋值时，TS只会做单属性的赋值兼容性检查：original.$type的类型是'a'|'b'，和TypeUnion的$type属性类型完全一致，所以赋值不会报错。
   但这种写法是类型不安全的：TS不会再校验对象的整体结构，哪怕你后续没有补全somefield、otherfield等必填字段，也不会触发报错，运行时很容易出现字段缺失的问题。

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