如何无需辅助函数直接实现PropsFormatter泛型的类型推断？

为什么直接用PropsFormatter<typeof obj>无法实现精确类型推断？ #

当你直接指定泛型类型PropsFormatter<typeof obj>时，TypeScript的类型系统会做以下处理：

• 先将T解析为具体的对象类型（比如{ name: string; age: number }）
• keyof T会变成联合类型"name" | "age"，T[keyof T]则是string | number
• 最终PropsFormatter<T>的每个元素中，format的参数类型会被推断为联合类型，而无法根据prop的具体值自动缩小到对应属性的类型

这是因为在静态类型声明中，TypeScript无法为数组的每个元素建立「prop值 → 对应T[prop]类型」的关联——数组元素的prop和format参数在类型层面是独立的，类型系统只能识别到它们属于联合类型的范围，无法做更细粒度的匹配。

辅助函数makeConfig为什么能解决问题？ #

辅助函数利用了TypeScript的函数参数上下文类型推断特性：

• 当你调用makeConfig并传入配置数组时，TypeScript会为数组中的每个元素单独推断对应的K（keyof T的子类型）
• 每个元素的prop被限定为具体的K，format的参数类型则自动绑定为T[K]，从而实现精确的类型匹配

代码示例对比 #

直接使用PropsFormatter<T>的问题

const obj = { name: "Alice", age: 25 };

// 定义泛型类型
type PropsFormatter<T> = {
  prop: keyof T;
  format: (value: T[keyof T]) => string;
}[];

// 此时format的参数是string | number，无法匹配prop的具体类型
const config: PropsFormatter<typeof obj> = [
  { prop: "name", format: (val) => val.toUpperCase() }, // 报错：val可能是number，没有toUpperCase方法
  { prop: "age", format: (val) => val.toString() }, // val被推断为string | number，不够精确
];

使用辅助函数的正确实现

const obj = { name: "Alice", age: 25 };

// 辅助函数通过泛型推断绑定每个元素的key与value类型
function makeConfig<T>(config: Array<{ [K in keyof T]: { prop: K; format: (value: T[K]) => string } }[keyof T]>) {
  return config;
}

// 每个format的参数自动推断为对应prop的类型
const config = makeConfig<typeof obj>([
  { prop: "name", format: (val) => val.toUpperCase() }, // val: string
  { prop: "age", format: (val) => val.toString() }, // val: number
]);

额外说明：正确的PropsFormatter<T>定义 #

其实可以通过映射类型定义更精确的PropsFormatter<T>，但直接声明变量类型时依然无法自动推断，必须借助函数上下文：

type PropsFormatter<T> = Array<{ [K in keyof T]: { prop: K; format: (value: T[K]) => string } }[keyof T]>;

这个类型本身是正确的，但直接用const config: PropsFormatter<typeof obj> = [...]时，TypeScript不会强制数组元素匹配联合类型的具体分支，只有函数参数的推断会触发这个匹配逻辑。

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