如何在TypeScript中实现判别式联合：基于键值约束另一键类型

你之前的写法问题在于把RootType定义成了单一对象类型，而非判别式联合类型，导致TypeScript无法将field1的取值和field2的类型做绑定，lint才会显示所有可能的字段。正确的实现方式是把RootType拆分成多个绑定了具体field1值的类型联合：

基础实现方式 #

type Field1Values = "a" | "b" | "c";

type TypeForValueA = {
  propA: string; // 示例字段，根据实际需求定义
};

type TypeForValueB = {
  propB: number; // 示例字段，根据实际需求定义
};

type TypeForValueC = {
  propC: boolean; // 示例字段，根据实际需求定义
};

// 正确的判别式联合类型：每个成员绑定固定的field1和对应的field2类型
type RootType =
  | { field1: "a"; field2: TypeForValueA }
  | { field1: "b"; field2: TypeForValueB }
  | { field1: "c"; field2: TypeForValueC };

使用示例 #

此时TypeScript会根据field1的取值自动约束field2的类型，lint也只会显示对应类型的字段：

// 合法：field1为"a"时，field2只能符合TypeForValueA的结构
const objA: RootType = {
  field1: "a",
  field2: { propA: "test" }
};

// 合法：field1为"b"时，field2只能符合TypeForValueB的结构
const objB: RootType = {
  field1: "b",
  field2: { propB: 123 }
};

// 非法：field1为"a"但field2用了TypeForValueB的结构，TS会报错
const objInvalid: RootType = {
  field1: "a",
  field2: { propB: 456 }
};

更易维护的映射生成方式 #

如果后续需要新增field1的取值，手动修改联合类型比较繁琐，可以用映射类型自动生成判别式联合：

// 先定义field1值与对应field2类型的映射关系
type FieldTypeMap = {
  a: TypeForValueA;
  b: TypeForValueB;
  c: TypeForValueC;
};

// 通过映射类型自动生成判别式联合
type RootType = {
  [K in keyof FieldTypeMap]: {
    field1: K;
    field2: FieldTypeMap[K];
  };
}[keyof FieldTypeMap];

这种方式下，新增field1值时只需要在FieldTypeMap里添加新的键值对即可，无需修改RootType的定义，扩展性更好。

为什么之前的写法无效 #

你之前尝试的单一对象类型写法：

type RootType = {
  field1: Field1Values,
  field2: TypeForValueA | TypeForValueB | TypeForValueC
}

本质上是允许field1和field2任意组合（比如field1="a"但field2用TypeForValueB的结构），TypeScript无法建立两者的绑定关系，因此lint会显示所有field2联合类型的字段，这不符合你需要的“仅显示对应类型字段”的需求。而判别式联合通过将每个field1值与对应field2类型封装成独立的联合成员，让TypeScript能做精确的类型推断和约束。

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