TypeScript中如何基于interface强制约束setValue的key对应value类型

问题根因 #

原函数中两个参数的类型没有建立关联关系：key: keyof T表示参数是T所有键的联合类型，value: T[keyof T]表示参数是T所有属性值类型的联合类型，TS只会分别校验两个参数是否命中各自的联合类型范围，不会校验二者是否匹配同一个属性的键值对应关系。

修复方案 #

新增一个泛型参数绑定键的类型，将两个参数的类型做关联即可：

interface User{
    name:string;
    age:number;
    friends:string[]
    hasPet:boolean
}

// 新增泛型K，约束为T的键的子类型，实现key和value的类型绑定
function setValue<T, K extends keyof T>(key: K, value: T[K] ):void{
    console.log(key, value)
    // ...some additional logic
}

setValue<User>("age", true ) // 此时会正确抛出类型错误：不能将类型“boolean”分配给类型“number”
setValue<User>("age", 20 ) // 类型校验正常通过
setValue<User>("name", "小明") // 类型校验正常通过
setValue<User>("friends", ["小红", "小李"]) // 类型校验正常通过
setValue<User>("hasPet", false) // 类型校验正常通过

修改后，传入第一个参数的具体键值时，TS会自动推导泛型K的实际类型，进而将第二个参数的类型自动限定为该键对应属性的类型，完全满足需求。

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