TypeScript两种泛型函数定义方式对比：选择建议、优势及惯用写法解析

这两个写法乍一看调用起来没区别，但在类型精确性和实际开发体验上差得挺远的，咱们一步步拆解：

核心差异：返回值的类型精度 #

先看实际调用的例子，直观感受一下：

const user = { name: "Alice", age: 30 };

// 选项1的调用结果
const name1 = foo1(user, "name"); // 类型是 string（完全精确）
const age1 = foo1(user, "age"); // 类型是 number

// 选项2的调用结果
const name2 = foo2(user, "name"); // 类型是 string | number（联合类型）
const age2 = foo2(user, "age"); // 类型还是 string | number

选项1通过额外的泛型参数K extends keyof T，把传入的key的具体类型给“锁定”了，所以返回值是该键对应的精确值类型；而选项2的返回值是T所有值类型的联合类型——哪怕你传了明确的键，TS也没办法把返回值类型细化到具体的那个值类型。

优劣对比 #

• 类型安全性：选项1完胜
  用选项2的话，后续如果要对返回值做类型相关的操作（比如把name2当成字符串拼接），TS会直接报错，因为它认为name2可能是number。你要么加类型断言（很不安全，容易埋下隐患），要么做额外的类型收窄（平白多写代码），完全没必要。选项1则不会有这个问题，类型一步到位。

• 可读性与意图表达：选项1更清晰
  选项1的泛型参数K extends keyof T直接告诉阅读代码的人：这个函数接收的key是T的某个具体键，返回对应的值类型。而选项2的写法就模糊很多，别人看了会疑惑“为什么返回值是联合类型？是不是函数逻辑有问题？”

• 调用体验：两者完全一致
  别担心选项1多了一个泛型参数会增加调用成本——TypeScript会自动帮你推断T和K的类型，调用时完全不需要手动指定，和选项2的写法调用起来一模一样。

惯用写法建议 #

TypeScript社区普遍推荐选项1的写法，这是TS处理“从对象中取指定键的值”这类场景的标准范式。比如TS内置的Pick工具类型、很多第三方库（比如Lodash的get函数）都是用这种多泛型参数的方式来保证类型精确性的。

当然，如果你的函数只是做一些完全不依赖值类型的操作（比如单纯打印这个值，不做任何类型相关逻辑），选项2也能凑合用，但这种场景非常少见。

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