TypeScript如何从对象类型生成键值自动匹配的KeyValue泛型类型

解决方案 #

完全可以实现，你只需要通过映射类型+索引访问生成所有合法键值对的联合类型即可，具体实现如下：

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

实现原理 #

1. 首先用映射类型遍历泛型T的所有属性键K，为每一个键单独生成一组key和value严格绑定的类型
2. 再通过[keyof T]做索引访问，把所有键对应的绑定类型整合成联合类型
3. 最终KeyValue<Foo>会自动推导为如下联合类型，不需要你手动枚举任何键：

// KeyValue<Foo> 实际展开结果
| { key: 'a', value: string }
| { key: 'b', value: number }
| { key: 'c', value: boolean }

效果验证 #

你需要的数组场景完全可以正常校验：

const kvs: Array<KeyValue<Foo>> = [
  {key: 'a', value: 'STRING'}, // 正常通过
  {key: 'b', value: 42}, // 正常通过
  {key: 'c', value: true}, // 正常通过
  {key: 'a', value: 123}, // 编译报错：类型number不能赋值给类型string
  {key: 'c', value: 'test'}, // 编译报错：类型string不能赋值给类型boolean
];

后续如果给Foo新增属性，KeyValue<Foo>也会自动同步更新类型约束，不需要额外修改定义。

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