如何从const对象生成含通配符的映射类型校验Angular路由路径？

先看你的路由定义：

const ROUTES = {
  PAGE_NO_PARAMS: '/hello/page/two',
  PAGE_R: '/about/:id',
  PAGE_Z: '/page/page/:param/:id',
  PAGE_N: '/who/:x/:y/:z/page',
} as const

你需要把路径里的:xxx参数替换成${string}通配符，生成一个能让解析后的实际路径通过类型检查的联合类型，直接上实现代码：

// 提取ROUTES里所有路径的原始类型
type RouteValues = typeof ROUTES[keyof typeof ROUTES];

// 递归替换路径中的参数部分为${string}
type ReplaceParams<T extends string> = 
  // 匹配中间的/:xxx/格式，替换后递归处理剩余部分
  T extends `${infer Prefix}/:${infer _}/${infer Suffix}` 
    ? `${Prefix}/${string}/${ReplaceParams<Suffix>}` 
    // 匹配末尾的/:xxx格式
    : T extends `${infer Prefix}/:${infer _}` 
      ? `${Prefix}/${string}` 
      // 无参数的路径直接返回
      : T;

// 最终的有效路由类型
type ValidRoute = ReplaceParams<RouteValues>;

验证一下效果：

// 以下都能通过类型检查
const valid1: ValidRoute = '/hello/page/two';
const valid2: ValidRoute = '/about/123';
const valid3: ValidRoute = '/page/page/abc/456';
const valid4: ValidRoute = '/who/a/b/c/page';

// 以下会触发编译错误，不符合有效路由格式
const invalid1: ValidRoute = '/about'; // 缺少参数部分
const invalid2: ValidRoute = '/page/page/abc'; // 少一个参数

简单解释 #

• RouteValues：自动抓取ROUTES对象里所有路径字符串，形成一个联合类型
• ReplaceParams：利用TypeScript的模板字面量类型做模式匹配，把路径中所有:xxx的参数位置替换成${string}，递归处理确保多参数路径也能被完整替换
• ValidRoute：组合上面两个类型，得到你需要的带通配符的有效路由类型，这样实际跳转的路径只要符合格式就能通过检查，不符合的直接在编译阶段报错，不用等到运行时才发现问题

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