如何定义TypeScript通用KeyValuePair泛型实现对象键值类型绑定与自动补全

实现代码 #

type KeyValuePair<T> = {
  [K in keyof T]: {
    key: K
    value: T[K]
  }
}[keyof T]

实现逻辑 #

通过TypeScript映射类型遍历传入的对象类型T的所有键，为每个键单独生成绑定了对应值类型的键值对结构，最后通过索引访问[keyof T]将所有单键的键值对结构合并为联合类型，即可达成需求效果。

效果验证 #

// 测试用对象类型
type User = { id: number, userName: string }
let userKeyValuePair: KeyValuePair<User>

// 合法赋值：key为id时value必须是number
userKeyValuePair = { key: 'id', value: 687 }
// 合法赋值：key为userName时value必须是string
userKeyValuePair = { key: 'userName', value: '测试用户名' }

// 会触发类型错误：key为id时value赋值字符串不符合要求
userKeyValuePair = { key: 'id', value: 'string' }

特性说明 #

• 支持key自动补全：输入key字段值时，编辑器会自动提示传入类型的所有合法键名
• 类型强校验：value类型会和当前选择的key对应类型强绑定，不匹配时会直接触发类型错误提示

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