如何基于常量数组的键值对生成对应TypeScript类型？

问题背景 #

现有一个通过const断言约束的数组，每个元素包含key（目标类型的属性名）和type（类型字符串标识），需要生成一个类型：以数组元素的key为属性名，将对应的type字符串映射为实际TypeScript基础类型。但直接使用映射类型会得到所有类型的联合值，无法为每个属性匹配精确类型。

正确实现代码 #

type Item = {
  key: string;
  type: string;
}
const Items = [
  { key: "label", type: "string" },
  { key: "value", type: "number" },
  { key: "name", type: "string" },
  { key: "required", type: "boolean" },
] as const satisfies Item[];

type ArrayItem = (typeof Items)[number];
type ItemType<T extends ArrayItem['type']> = T extends 'string' ? string : T extends 'number' ? number : T extends 'boolean' ? boolean : never;

// 生成目标类型的正确写法
type ExpectedType = {
  [K in ArrayItem["key"]]: ItemType<Extract<ArrayItem, { key: K }>["type"]>;
};

// 验证结果
type t = ExpectedType;
/* 等同于：
type t = {
  label: string;
  value: number;
  name: string;
  required: boolean;
}
*/

原写法问题分析 #

之前的写法type ExpectedType = { [key in ArrayItem["key"]]: ArrayItem["type"]; }会生成所有类型的联合值，原因是：

• ArrayItem是数组所有元素的联合类型，ArrayItem["type"]会提取所有元素type字段的联合值（string | number | boolean）
• 每个属性都会直接使用这个联合类型，无法关联到对应key的具体type值

解决方案原理 #

使用Extract<ArrayItem, { key: K }>从联合类型中精准筛选出key等于当前遍历键K的元素，这样就能获取到该键对应的具体type字符串，再通过ItemType映射为实际的TypeScript基础类型，最终每个属性都能得到精确的类型。

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