如何根据event的key匹配回调函数的参数类型？

首先定义对应的接口和事件-类型映射：

// 定义业务所需接口
interface A {
  propA: string;
}

interface B {
  propB: number;
}

interface C {
  propC: boolean;
}

// 建立事件名称与对应数据类型的绑定映射
type EventMap = {
  a: A;
  b: B;
  c: C;
};

接着定义单个事件项的类型，通过泛型将事件名和回调参数类型强关联：

type EventItem<K extends keyof EventMap> = {
  event: K;
  callback: (data: EventMap[K]) => void;
};

最后定义func函数，用泛型数组约束入参，确保TypeScript能精准推断每个回调的参数类型：

function func<T extends readonly EventItem<keyof EventMap>[]>(params: { items: T }) {
  // 此处编写函数逻辑
}

使用时，每个回调的data类型会自动匹配对应事件：

func({
  items: [
    {
      event: 'a',
      callback: (data) => {
        // data 自动推断为 A 类型，可直接访问 propA
        console.log(data.propA);
      },
    },
    {
      event: 'b',
      callback: (data) => {
        // data 自动推断为 B 类型，可直接访问 propB
        console.log(data.propB);
      },
    },
    {
      event: 'c',
      callback: (data) => {
        // data 自动推断为 C 类型，可直接访问 propC
        console.log(data.propC);
      },
    },
  ],
});

原理说明 #

核心是通过EventMap明确事件与数据类型的对应关系，再利用泛型将每个EventItem的event字段和callback的参数类型做强绑定。最后用泛型数组作为func的入参，保留数组中每个元素的具体类型信息，让TypeScript能够逐个推断出回调的参数类型。

内容的提问来源于stack exchange，提问作者dom wis