如何使用TypeScript泛型依据对象同级字段设置对应函数参数类型

实现方案 #

你可以通过两层泛型+映射类型实现类型自动推导，完整代码如下：

// 定义单条配置的泛型类型
type Config<T extends Record<string, string | number>> = {
  payload: T;
  caller: (payloadArg: T) => void;
}

// wrapper函数的泛型定义
function wrapper<
  // 泛型T捕获所有配置项的payload实际类型结构
  T extends Record<string, Record<string, string | number>>
>(config: {
  // 遍历每个配置key，绑定当前key对应的payload类型到Config的泛型参数
  [K in keyof T]: Config<T[K]>
}) {
  // 此处编写wrapper的业务逻辑即可
}

效果验证 #

调用时TypeScript会自动推导每个caller的入参类型，完全符合要求：

wrapper({
  keyOne: {
    payload: {
      someField: 'foo'
    },
    // payload1自动推导为 { someField: string } 类型
    caller: (payload1) => {}
  },
  keyTwo: {
    payload: {
      someOtherField: 2
    },
    // payload2自动推导为 { someOtherField: number } 类型
    caller: (payload2) => {}
  }
})

实现逻辑 #

• 泛型T会在你调用wrapper时自动捕获传入的配置对象中，所有key对应的payload的实际类型结构
• 映射类型[K in keyof T]遍历每个配置项，将当前配置项的payload类型T[K]绑定到Config的泛型参数，从而让同级caller的入参自动匹配对应的payload类型

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