TypeScript判别式联合类型映射处理的类型收窄问题求助

当用if分支处理判别式联合类型时，TypeScript会自动将类型收窄到对应变体的具体类型，但换成判别式到处理函数的映射实现逻辑时，直接调用mapping[message.kind](message)会触发类型错误——因为TS无法关联当前message的具体类型与映射中对应函数的参数类型。

问题代码回顾 #

type Message =
  | { kind: "mood"; isHappy: boolean }
  | { kind: "age"; value: number };

type Mapping = {
  mood: (payload: { isHappy: boolean }) => void;
  age: (payload: { value: number }) => void;
};

const mapping: Mapping = {
  mood: ({ isHappy }) => console.log(isHappy),
  age: ({ value }) => console.log(value + 1),
};

const process = (message: Message) => {
  // TS报错：无法确保message与函数参数类型匹配
  mapping[message.kind](message);
};

解决方案：用泛型实现分布式类型关联 #

通过泛型约束，让TypeScript明确message的具体变体与映射函数的对应关系，实现类型安全的调用：

步骤1：优化映射类型的自动推导

先定义工具类型，从Message中自动提取对应kind的payload类型，避免手动维护Mapping：

type Message =
  | { kind: "mood"; isHappy: boolean }
  | { kind: "age"; value: number };

// 提取指定kind对应的Message变体的payload（剔除kind字段）
type MessagePayload<K extends Message["kind"]> = 
  Omit<Extract<Message, { kind: K }>, "kind">;

// 自动推导Mapping，确保每个kind对应正确的处理函数签名
type Mapping = {
  [K in Message["kind"]]: (payload: MessagePayload<K>) => void;
};

const mapping: Mapping = {
  mood: ({ isHappy }) => console.log(isHappy),
  age: ({ value }) => console.log(value + 1),
};

步骤2：泛型约束实现类型收窄

修改process函数为泛型函数，将message约束为具体的Message变体，让TS能精准关联映射函数的参数类型：

const process = <K extends Message["kind"]>(message: Extract<Message, { kind: K }>) => {
  mapping[message.kind](message); // TS正确识别类型，无报错
};

替代方案：类型断言（不推荐，仅作补充） #

如果不想使用泛型，也可以通过类型断言绕过TS的检查，但这种方式会丢失部分类型安全性：

const process = (message: Message) => {
  (mapping[message.kind] as (msg: typeof message) => void)(message);
};

原理说明 #

原代码报错的核心原因是：mapping[message.kind]的类型是两个函数的联合类型，而message是Message联合类型——TS无法确定联合类型中的哪个函数能接收当前的message。泛型写法通过将message约束为单一变体，让TS明确mapping[message.kind]对应的具体函数，参数类型完全匹配，从而消除错误。

内容的提问来源于stack exchange，提问作者J-B