如何为Record值中的泛型函数参数正确标注类型？

问题出在addQueries的泛型约束过于宽松，使用QueryInfo<any>导致TypeScript无法推断每个QueryInfo的具体参数类型。我们可以通过映射类型让TypeScript自动提取每个query函数的参数类型，以此约束对应的getParamsKey参数类型。

修改后的完整代码：

const getUser = async ({id}: {id: number}) => {}

const getUsers = async ({page = 1, pageSize = 5}) => {}

type QueryInfo<P> = {
  query: (params: P) => any
  getParamsKey: (params: P) => any
}

// 重新定义addQueries的泛型，自动推断每个QueryInfo的参数类型
const addQueries = <Q extends Record<string, { query: (...args: any[]) => any }>>(queries: {
  [K in keyof Q]: QueryInfo<Parameters<Q[K]['query']>[0]>
}) => {}

addQueries({
  getUser: {
    query: getUser,
    getParamsKey: (params) => {
      // params类型现在是 {id: number}
      console.log(params.id); // 类型检查通过
    },
  },
  getUsers: {
    query: getUsers,
    getParamsKey: (params) => {
      // params类型现在是 {page?: number, pageSize?: number}
      console.log(params.page, params.pageSize); // 类型检查通过
    },
  },
})

关键修改点： #

1. 调整addQueries的泛型约束：

   • 泛型Q约束为包含query函数的对象，允许TypeScript捕获每个query的具体参数类型。
   • 使用映射类型{ [K in keyof Q]: QueryInfo<Parameters<Q[K]['query']>[0]> }，对每个属性K，提取其query函数的第一个参数类型（即params的类型），作为QueryInfo的泛型参数P。

2. 自动类型推断：
   现在TypeScript会自动根据每个query函数的定义，推断出对应getParamsKey的params参数类型，无需手动指定泛型。

如果希望getUsers的params类型为必填属性（而非可选），只需显式定义其参数类型：

const getUsers = async ({page = 1, pageSize = 5}: {page: number, pageSize: number}) => {}

此时getParamsKey的params类型会变为{page: number, pageSize: number}。

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