泛型约束使用困惑：为何两种写法返回的类型精度不同？

这两种写法功能上等价，但TypeScript的类型推断逻辑完全不同，导致了返回类型的精度差异：

第一种写法：丢失具体Key的类型信息 #

const testObj = { x: 10, y: "Hello", z: true };

function getProperty<T>(obj: T, key: keyof T) {
  return obj[key];
}

const xValue = getProperty(testObj, 'x');
// const xValue: string | number | boolean

这里函数只声明了泛型T，key的类型是keyof T（也就是"x"|"y"|"z"）。当你调用函数时，TypeScript只能推断出key是这三个值中的某一个，但没办法记住你具体传的是哪个——函数签名里没有变量来保存这个具体的key类型。因此返回类型只能是T[keyof T]，也就是所有属性值类型的联合。

第二种写法：捕获具体Key的类型 #

const testObj = { x: 10, y: "Hello", z: true };

function getProperty<T, K extends keyof T>(obj: T, key: K) {
  return obj[key];
}

const xValue = getProperty(testObj, 'x');
// const xValue: number

这里多了一个泛型参数K，并且用extends keyof T约束它必须是T的键的子类型。当你传入具体的'x'时，TypeScript会同时推断出：

• T是{x: number, y: string, z: boolean}
• K是具体的"x"类型

此时函数的返回类型是T[K]，也就是T["x"]，对应到具体的number类型。本质是通过额外的泛型参数把调用时的具体key类型“固定”下来，让TypeScript能精准关联到对应的属性值类型。

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