如何基于const数组ROUTES创建键值严格匹配的SomeType类型？

给定如下常量定义：

const ROUTES = [
  { name: "Login", path: "/login", id: "login" },
  { name: "Registration", path: "/registration", id: "registration" },
  { name: "Settings", path: "/settings", id: "settings" },
] as const;

我们需要创建SomeType类型，要求：

• 以ROUTES中每个项的id作为对象键
• 对应键的值必须是该项的path
• 键值对必须严格和ROUTES配置一一匹配，不允许错配、遗漏或多余

解决方案 #

可以通过TypeScript的映射类型和Extract工具类型实现：

type SomeType = {
  [K in (typeof ROUTES)[number]['id']]: Extract<(typeof ROUTES)[number], { id: K }>['path']
};

类型解析 #

1. (typeof ROUTES)[number]：获取ROUTES数组中单个元素的字面量类型
2. [K in ...['id']]：遍历ROUTES所有项的id，作为对象的键
3. Extract<(typeof ROUTES)[number], { id: K }>：从ROUTES元素类型中，筛选出id等于当前键K的具体类型
4. 最后取该类型的path属性，确保每个键对应的值只能是ROUTES中匹配的path

效果验证 #

正确示例 #

const correctIdToPaths: SomeType = {
  login: "/login",
  registration: "/registration",
  settings: "/settings", 
} as const;
// 完全符合要求，无类型错误

错误示例1：值不匹配 #

const duplicatedValues: SomeType = {
  login: "/registration", // ❌ 类型错误："login"对应的path必须是"/login"
  registration: "/registration",
  settings: "/settings", 
} as const;

错误示例2：缺少键 #

const missingKey: SomeType = {
  login: "/login",
  registration: "/registration",
} as const; // ❌ 类型错误：缺少必填键"settings"

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