TypeScript无效赋值报错为何指向错误属性？如何解决？

问题场景 #

业务层定义了Dog、Cat等类型，外部返回的RawData类型与业务类型不匹配，示例代码如下：

type Dog = {
  type: "DOG";
  bark?: boolean;
};

type Cat = {
  type: "CAT";
  meow?: boolean;
};

// 存在类型错误的RawData
type RawData = { 
  type: "DOG" | "CAT";
  bark?: number;
};

const wrongValue: Dog | Cat = {} as RawData;

此时TypeScript会抛出模糊错误，提示RawData无法赋值给Dog | Cat，且错误指向type属性不兼容，但实际问题是RawData的bark属性类型为number，与Dog的bark属性boolean类型不匹配。只有将RawData的type固定为DOG时，错误提示才会正确指向bark属性。

错误原因 #

TypeScript在检查联合类型兼容性时，会优先通过判别式字段（如示例中的type）尝试匹配对应的联合成员。由于RawData的type是"DOG" | "CAT"的联合，同时它的bark字段类型既不匹配Dog的bark类型，也无法被Cat兼容（Cat不存在bark字段，且额外属性类型不符合预期），导致编译器无法找到任何一个完全匹配的联合成员，最终只能抛出最外层的判别式不兼容错误，无法精准定位到具体属性的类型问题。

解决办法 #

1. 拆分RawData为对应业务类型的子联合 #

将RawData拆分为与业务类型一一对应的子类型联合，让编译器能逐个检查每个子类型的兼容性，错误提示会直接定位到具体属性：

type RawDog = { type: "DOG"; bark?: number };
type RawCat = { type: "CAT"; meow?: number };
type RawData = RawDog | RawCat;

const wrongValue: Dog | Cat = {} as RawData; // 错误提示直接指向bark类型不匹配

2. 使用类型守卫分步检查 #

通过类型守卫先判断type字段，再单独检查对应类型的属性，逐步暴露具体错误：

const rawValue: RawData = {};
let wrongValue: Dog | Cat;

if (rawValue.type === "DOG") {
  wrongValue = rawValue; // 此处直接提示bark的number类型无法赋值给boolean类型
} else {
  wrongValue = rawValue; // 此处提示存在多余的bark属性
}

3. 用工具类型提前校验RawData兼容性 #

定义工具类型强制RawData的每个子类型与业务类型严格兼容，在定义RawData阶段就暴露错误：

type CompatibleRaw<T> = { [K in keyof T]: T[K] };

// 定义时就会报错：bark的number类型与Dog的boolean不匹配
type RawData = CompatibleRaw<Dog> | CompatibleRaw<Cat>;

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