如何在TypeScript中实现字符串类型的前缀部分匹配？

你可以通过TypeScript的模板字面量类型和条件类型实现这个需求，具体方案如下：

1. 原始路由权限类型 #

首先是你定义的RoutePermissions联合类型：

export type RoutePermissions =
  | 'page:mypage1/subroute1'
  | 'page:mypage1/subroute2'
  | 'page:mypage1/subroute3'
  | 'page:mypage2/subroute1'
  | 'page:mypage3/subroute1'

2. 实现PartialRouteMatchType #

通过类型工具提取每个路由的前缀部分，并自动去重：

// 提取单个路由的前缀（到第一个/之前的部分）
type ExtractRoutePrefix<T extends string> = T extends `${infer Prefix}/${string}` ? Prefix : T;

// 生成允许的部分匹配前缀联合类型
type PartialRouteMatchType = ExtractRoutePrefix<RoutePermissions>;

3. 验证效果 #

定义函数并测试：

const partialRouteMatch = (partialRoute: PartialRouteMatchType) => {};

partialRouteMatch('page:mypage1'); // ✅ 合法
partialRouteMatch('page:mypage2'); // ✅ 合法
partialRouteMatch('page:mypage3'); // ✅ 合法
partialRouteMatch('page:mypage22'); // ❌ 类型报错，不存在该前缀

原理说明 #

• ExtractRoutePrefix<T>利用模板字面量的模式匹配能力，通过infer关键字捕获每个路由字符串中第一个/之前的部分作为前缀；如果路由没有/（兼容场景），则直接返回原字符串。
• 当将该类型工具应用到RoutePermissions联合类型时，TypeScript会自动遍历所有联合成员，提取对应的前缀并自动合并重复项，最终得到唯一的合法前缀联合类型。

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