TypeScript中如何从对象生成键值对应的模板字面量联合类型

你之前的写法产生全排列的核心原因：keyof T和T[keyof T]是两个互不关联的独立联合类型，TS在模板字面量中遇到两个独立联合时，会默认生成两个联合所有元素的笛卡尔积，自然会出现键和非对应值乱匹配的结果。

要让键和自身的值绑定，靠映射类型逐个遍历键、在单次遍历中取当前键对应的值拼接即可，具体实现如下：

1. 先给原始对象加as const断言，让TS能推断出精确的字面量值类型，否则值会被推断为宽泛的string，拿不到你要的精确字符串结果：

const obj = {
  foo: "bar",
  a: "b",
  roses: "red",
} as const;

2. 写一个通用泛型工具类型：

type EntriesStr<T> = {
  [K in keyof T]: `${K & string}=${T[K] & string}`
}[keyof T]

3. 传入对象的类型即可得到目标结果：

type Foo = EntriesStr<typeof obj>
// 输出类型："foo=bar" | "a=b" | "roses=red"

实现逻辑说明 #

• 映射类型[K in keyof T]会逐个遍历T的每一个键，每次循环拿到的K都是单个独立的键字面量，此时取T[K]就是当前键专属的对应值，不会和其他键的值产生混排
• 末尾的[keyof T]是索引访问语法，会把映射类型里所有键对应的值取出来，组成最终的联合类型
• 类型中加的& string是兼容处理，用来过滤number、symbol类型的键值，避免模板字面量类型校验报错，如果你确定对象的键和值全是字符串，可以删掉这部分。

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