如何为Vue Router路由名称生成类型并兼容RouteRecordRaw[]

核心思路 #

问题本质是TypeScript对只读数组与可变数组的类型校验冲突，同时我们需要保留路由名称的类型推导能力。可以通过类型断言+工具类型提取的方式兼顾类型安全和类型推导。

具体方案 #

1. 定义路由时保留字面量类型推导 #

先让TypeScript自动推导routes的字面量类型，同时用as const锁定类型，确保路由名称不会被拓宽为泛型string：

const routes = [
  {
    path: '/',
    name: 'home',
    component: () => import('../views/Home.vue')
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/About.vue')
  }
] as const;

2. 提取精确的路由名称类型 #

利用TypeScript的索引类型，从routes中提取所有name字段的联合类型：

type RouteName = (typeof routes)[number]['name'];

3. 初始化路由时兼容RouteRecordRaw[]类型 #

因为createRouter要求传入RouteRecordRaw[]类型，而我们的routes是只读字面量数组，通过类型断言完成兼容转换：

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: routes as unknown as RouteRecordRaw[]
});

4. 约束辅助函数的参数类型 #

现在可以用RouteName来约束findRouteByName的参数，实现严格的类型校验，避免传入不存在的路由名称：

function findRouteByName(name: RouteName) {
  return routes.find(route => route.name === name);
}

方案优势 #

• 完全基于实际路由配置推导类型，无需手动维护路由名称枚举
• 既满足Vue Router对RouteRecordRaw[]类型的要求，又实现了路由名称的精确约束
• 避免了只读类型与可变类型的赋值冲突，类型安全不受影响

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