为何TypeScript无法将泛型用作类型守卫？求原因与解决方案

你遇到的矛盾情况，核心是TypeScript泛型在函数调用阶段和函数内部执行阶段的类型推断逻辑差异：

1. 调用阶段参数校验正常：当你传入具体的字面量参数（比如{type: "B", data: {b: ""}}）时，TypeScript会直接推断出泛型TType的精确值（这里是"B"），此时data的类型被严格约束为DataMap["B"]，所以参数不匹配时会直接报错。
2. 函数内部类型收窄失败：但在函数内部，泛型TType是一个覆盖所有可能值的约束类型（可以是"A"、"B"，甚至它们的联合类型"A" | "B"）。当你通过type === "A"做判断时，TypeScript无法反向推断出此时TType就等于"A"——它只会认为type的类型是TType & "A"，但data的类型依然是DataMap[TType]（即{a: string} | {b: string}的联合类型），自然无法安全访问data.a或data.b。

方案1：改用判别式联合类型（最推荐） #

放弃泛型，直接定义类型强关联的联合类型，让TypeScript通过type字段自动完成类型收窄：

type DataMap = {
  A: { a: string };
  B: { b: string };
};

// 生成{type:"A", data:{a:string}} | {type:"B", data:{b:string}}的联合类型
type ItemOptions = {
  [K in keyof DataMap]: {
    type: K;
    data: DataMap[K];
  };
}[keyof DataMap];

function Item({ type, data }: ItemOptions) {
  if (type === "A") {
    return data.a; // TypeScript自动收窄data为{A: {a:string}}
  }
  if (type === "B") {
    return data.b; // 类型收窄正常
  }
  // 可选：添加穷尽检查，避免后续新增DataMap键时遗漏处理
  const _exhaustiveCheck: never = type;
  throw new Error(`Unknown type: ${_exhaustiveCheck}`);
}

这种写法完全贴合TypeScript的类型系统设计，代码简洁且类型安全，是解决这类关联类型问题的标准方案。

方案2：保留泛型，使用自定义类型守卫 #

如果必须保留泛型结构，可以通过自定义类型守卫来手动关联type和TType的类型：

type DataMap = {
  A: { a: string };
  B: { b: string };
};

type Type = keyof DataMap;
type Data<TType extends Type> = DataMap[TType];

interface ItemOptions<TType extends Type> {
  data: Data<TType>;
  type: TType;
}

// 自定义类型守卫，判断type是否为目标类型T
function isType<T extends Type>(type: Type, target: T): type is T {
  return type === target;
}

function Item<TType extends Type>({ type, data }: ItemOptions<TType>) {
  if (isType(type, "A")) {
    return data.a; // TypeScript推断此时TType为"A"，data类型自动收窄
  }
  if (isType(type, "B")) {
    return data.b;
  }
  const _exhaustiveCheck: never = type;
  throw new Error(`Unknown type: ${_exhaustiveCheck}`);
}

方案3：TS 4.7+ 用switch语句自动收窄 #

TypeScript 4.7及以上版本优化了泛型在switch语句中的类型推断，可以直接通过switch完成收窄：

type DataMap = {
  A: { a: string };
  B: { b: string };
};

type Type = keyof DataMap;
type Data<TType extends Type> = DataMap[TType];

interface ItemOptions<TType extends Type> {
  data: Data<TType>;
  type: TType;
}

function Item<TType extends Type>({ type, data }: ItemOptions<TType>) {
  switch (type) {
    case "A":
      return data.a; // TS 4.7+自动识别type和data的关联，完成类型收窄
    case "B":
      return data.b;
    default:
      const _exhaustiveCheck: never = type;
      throw new Error(`Unknown type: ${_exhaustiveCheck}`);
  }
}

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