如何从泛型函数参数推导返回类型？实现各参数独立泛型推导

问题描述 #

原代码中，泛型P会被统一推导为第一个参数的类型（number），导致第二个参数{value: 'myString'}被标记为类型错误，无法实现返回数组的每个元素类型对应各自参数的value类型（即a为number，b为string）。

原错误代码：

type MyGenericWrapper<T> = {value: T;}

// 从泛型对象包装器中提取所有值
function allValues<P>(...args: MyGenericWrapper<P>[]) : P[] {
  return args.map(arg => arg.value);
}

const [a, b] = allValues({value: 1}, {value: 'myString'});

解决方案 #

要让编译器为每个函数参数单独推导类型，需要使用元组泛型结合映射类型，让泛型参数接受参数的元组类型，再提取每个元素的value类型作为返回的元组类型。

方法一：基于参数元组推导返回类型

type MyGenericWrapper<T> = { value: T; };

function allValues<T extends MyGenericWrapper<any>[]>(...args: T): { [K in keyof T]: T[K]['value'] } {
  return args.map(arg => arg.value) as any;
}

const [a, b] = allValues({ value: 1 }, { value: 'myString' });
// 类型推导结果：a: number，b: string

方法二：直接指定返回元组类型（TypeScript 4.0+支持）

type MyGenericWrapper<T> = { value: T; };

function allValues<T extends readonly unknown[]>(...args: { [K in keyof T]: MyGenericWrapper<T[K]> }): T {
  return args.map(arg => arg.value) as T;
}

const [a, b] = allValues({ value: 1 }, { value: 'myString' });
// 类型推导结果：a: number，b: string

原理说明 #

• 两种方法都利用了TypeScript的映射类型和元组类型推导能力，让每个参数的value类型被单独推导，最终返回的数组会被识别为对应元素类型的元组，而非统一的P[]数组。
• 方法二中的readonly unknown[]是为了兼容只读元组场景，确保推导更灵活。

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