TypeScript：如何在Switch分支中收窄EventMap泛型类型？

我定义了如下的EventMap类型：

type Amount = number

export type EventMap = {
  'player:modifyCredits': Amount
  'player:modifyEnergy': Amount
  'player:die': void
}

接着编写了一个将触发事件转为字符串的函数：

export function actionEffectToLabel<K extends keyof EventMap = keyof EventMap>(effect: [K, EventMap[K]]) {
  const [key, value] = effect

  switch (key) {
    case 'player:modifyEnergy':
      return value > 0 ? `+ energy` : `- energy`
    case 'player:modifyCredits':
      return value > 0 ? `+${value} credits` : `${value} credits`
    default:
      return undefined
  }
}

但TypeScript在值比较的代码行抛出错误：

TS2365: Operator > cannot be applied to types EventMap[K] and number

我原本以为effect: [K, EventMap[K]]会在switch分支中关联key与对应value的类型，期望判断key为player:modifyEnergy时，类型系统能识别出value的类型是Amount（即number），请问这是否可行？

问题原因 #

当前函数的泛型K是keyof EventMap的子类型，但TypeScript无法在switch分支中自动将key的具体值和value的类型做关联。因为泛型K是一个联合类型的子类型，在函数内部，key和value的类型是绑定的，但switch分支的类型窄化只能作用于key本身，无法自动将这种绑定关系传递给value。

可行的解决方案 #

要让TypeScript识别分支中key和value的类型关联，需要将函数参数改为联合类型的元组，而不是泛型约束的元组：

type Amount = number

export type EventMap = {
  'player:modifyCredits': Amount
  'player:modifyEnergy': Amount
  'player:die': void
}

// 生成键与值严格绑定的联合元组类型
type Effect = { [K in keyof EventMap]: [K, EventMap[K]] }[keyof EventMap]

export function actionEffectToLabel(effect: Effect) {
  const [key, value] = effect

  switch (key) {
    case 'player:modifyEnergy':
      // 此时value会被正确推断为number类型
      return value > 0 ? `+ energy` : `- energy`
    case 'player:modifyCredits':
      // 同样，value类型为number
      return value > 0 ? `+${value} credits` : `${value} credits`
    case 'player:die':
      return 'player died'
    default:
      // 穷尽性检查：新增EventMap键时会触发编译错误，避免逻辑遗漏
      const _exhaustiveCheck: never = key
      return undefined
  }
}

方案说明 #

1. 联合元组类型Effect：通过映射类型生成每个键对应的元组，再取这些元组的联合类型，确保每个元组的key和value类型是严格绑定的。
2. 分支类型自动窄化：当switch匹配到具体的key值时，TypeScript会自动将value的类型窄化为对应的EventMap[key]类型，此时就能正常进行数值比较。
3. 穷尽性检查：添加const _exhaustiveCheck: never = key可以确保后续新增EventMap的键时，编译器会提示遗漏的分支，避免逻辑遗漏。

内容的提问来源于stack exchange，提问作者Johannes Klauß