如何从函数参数构建带参数名的键值接口类型？TypeScript类型转换方案问询

首先看你的场景，你有一个定义好的ITableProps接口，里面的onChange是一个带三个命名参数的函数，你希望把这些参数转成键值对形式的接口类型，而不是仅仅拿到参数类型的联合。

你之前尝试用Parameters和自定义的TupleToUnion只能得到参数类型的联合，这是因为Parameters会把函数参数转换成元组类型——虽然元组里的元素有参数名，但这些名称在类型层面只是语法糖，没法直接用来生成对象的键名。

针对你的特定场景，我们可以直接从onChange函数类型里推断每个参数的类型，然后手动构建出你想要的对象类型：

// 针对ITableProps的onChange函数定制的提取类型
type ExtractFuncParameters<T> = 
  ITableProps<T>['onChange'] extends (pagination: infer Pagination, filters: infer Filters, section: infer Section) => void ?
  { 
    pagination: Pagination;
    filters: Filters;
    section: Section;
  } : never;

用这个类型测试的话：

type Result = ExtractFuncParameters<unknown>;
// Result的类型就是你想要的：
// {
//   pagination: number;
//   filters: Record<string, unknown>;
//   section: string[];
// }

如果以后你想要更通用的方案，比如提取任意接受单个对象参数的函数的参数类型，可以这样写：

type ExtractObjectParams<F> = F extends (params: infer P) => void ? P : never;

// 比如把onChange改成对象参数的形式：
interface ITableProps<T> {
  onChange?: (params: { pagination: number; filters: Record<string, T>; section: string[] }) => void;
}

// 直接提取参数对象类型
type Result = ExtractObjectParams<ITableProps<unknown>['onChange']>;

这样就能完美得到你需要的带参数名的键值对接口啦。

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