如何在TypeScript泛型元组中实现元素间的依赖关系？

能否声明一个泛型元组，让其中一个元素依赖于另一个元素？比如基于以下定义：

interface Event<T, P extends any[] = []> {
  type: T;      // 事件名称，例如 'stop'
  payload: P;   // 事件参数，例如坐标
}
type MovementEvents = Event<'stop'>| Event<'run', [number, number]>;

当前有一个错误的实现：

type TransitionTuple<E extends Event<any, any>> = [
  EventType<E>,
  (...args: EventPayloadMap[E]) => void,
];

能不能改造它，让元组的第二个元素（回调函数）依赖于第一个元素（事件类型）？比如在下面的代码中，当指定事件类型为'run'时，如果回调参数不匹配就触发错误：

const transition: TransitionTuple<MovementEvents> = [
  'run',
  () => {}, // 这里必须报错，因为回调参数和事件不匹配
];

完全可以实现这种元组元素间的依赖关系。你原来的实现问题在于，当E是联合类型时，EventType<E>和EventPayloadMap[E]会各自展开成独立的联合类型，导致元组的两个元素之间没有绑定关系——TypeScript没法知道'run'对应的必须是带[number, number]参数的回调。

正确实现方式 #

我们可以用映射类型生成所有合法的元组组合，让每个事件类型和对应的回调参数严格绑定：

// 先定义辅助类型，提取事件的type和payload
type EventType<E extends Event<any, any>> = E['type'];
type EventPayload<E extends Event<any, any>> = E['payload'];

// 生成所有符合要求的Transition元组联合类型
type TransitionTuple<E extends Event<any, any>> = {
  [K in E as EventType<K>]: [K['type'], (...args: EventPayload<K>) => void]
}[EventType<E>];

验证效果 #

现在使用这个类型，当你给'run'事件配错回调参数时，TypeScript会准确报错：

const badTransition: TransitionTuple<MovementEvents> = [
  'run',
  () => {}, // ❌ 报错：类型“() => void”无法赋值给类型“(...args: [number, number]) => void”
];

const goodRunTransition: TransitionTuple<MovementEvents> = [
  'run',
  (x, y) => console.log(`Running to (${x}, ${y})`), // ✅ 参数匹配，正常通过
];

const goodStopTransition: TransitionTuple<MovementEvents> = [
  'stop',
  () => console.log('Stopped'), // ✅ stop事件无参数，正常通过
];

原理说明 #

1. 映射类型{ [K in E as EventType<K>]: [...] }会逐个遍历MovementEvents里的每个事件，为每个事件生成一个专属的元组类型——比如['run', (...args: [number, number]) => void]和['stop', () => void]。
2. 最后通过[EventType<E>]索引这个映射类型，得到所有合法元组的联合类型。此时TypeScript能识别元组第一个元素的具体类型，并强制第二个元素的回调参数与之严格匹配。

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