如何编写参数为属性名和对应属性值的TypeScript泛型函数？

场景1：接收对象、属性名、属性值三个参数 #

你原来的写法仅声明了对象类型F这一个泛型参数，keyof F会被推导为该对象所有键的联合类型，对应的值类型自然也会变成所有值的联合。只需新增一个绑定具体键的泛型参数即可：

declare function add<F extends object, K extends keyof F>(obj: F, prop: K, value: F[K]): void;

// 调用测试
add({a: 1, b: false}, 'b', 42); // 编译器抛出错误：类型“number”的参数不能赋给类型“boolean”的参数

这里泛型K会和你传入的具体prop参数绑定，F[K]就能精确匹配到该属性对应的类型，传入错误类型的值会直接触发类型报错。

场景2：提前指定对象类型，仅接收属性名、属性值两个参数 #

如果需要提前固定对象的类型，不需要每次传入对象，我们可以通过柯里化拆分泛型参数，避免需要手动填写所有泛型的问题：

// 外层函数固定对象类型F，返回实际执行的函数
declare function add<F extends Record<string, unknown>>(): <K extends keyof F>(name: K, value: F[K]) => void;

// 调用测试
const addForTarget = add<{a: number; b: boolean}>();
addForTarget('a', true); // 编译器抛出错误：类型“boolean”的参数不能赋给类型“number”的参数

如果你使用的是TypeScript 5.0及以上版本，也可以用部分类型推断的语法，不用柯里化也能实现效果：

declare function add<F extends Record<string, unknown>, K extends keyof F>(name: K, value: F[K]): void;

// 用_表示让TS自动推断第二个泛型参数K
add<{a: number; b: boolean}, _>('a', true); // 编译器抛出错误

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