如何用TypeScript模板字面量类型打造强类型路由动态参数系统？

本文共计662个文字，预计阅读时间需要3分钟。

使用 TypeScript 的模板字符串类型构建强类型：

定义带占位符的路径类型

路径中的动态段用模板字面量语法描述，配合联合类型实现“合法值穷举”：

• 字符串参数：用 string 占位，表示任意非空字符串（如用户 ID、slug）
• 数字参数：用 number 占位，TS 会拒绝传入字符串数字（如 "123"）
• 枚举式参数：用联合字面量（如 "list" | "grid"）限定可选值

示例：

type UserId = string; type PostId = number; type ViewMode = 'list' | 'grid'; type RoutePath = `/user/${UserId}` | `/post/${PostId}` | `/dashboard?mode=${ViewMode}`;

自动提取参数类型并校验传参

仅定义路径还不够，关键是要让跳转函数（如 navigate()）能根据路径自动推导出所需参数对象的结构。这需要配合条件类型和 infer：

• 写一个工具类型 ExtractParams<P>，从路径字面量中识别出所有 ${...} 段，并映射为键值对
• 例如 `/user/${string}/posts/${number}` 应推导出 { userId: string; postId: number }
• 再将该类型用于导航函数签名，就能强制传参对象字段名和类型完全匹配

嵌套路由与模块化组合

真实项目中路由常分模块管理（如 admin/、user/）。模板字面量支持递归组合：

• 先定义子路径类型：type AdminRoutes = '/admin/dashboard' | '/admin/settings';
• 再与前缀组合：type FullRoute = `/app${AdminRoutes}` | `/app${UserRoutes}`;
• 所有组合结果仍是精确字面量联合类型，IDE 补全、类型检查全覆盖

对接 React Router 或 Next.js 路由 API

实际集成时，需把类型系统和框架的运行时机制桥接起来：

• 用 RouteObject 配置表的 path 字段标注为你的 RoutePath 类型
• 自定义 useTypedNavigate() Hook，其参数类型由路径字符串动态 infer 出来
• 服务端路由（如 Next.js app/ 目录）可利用文件路径生成对应类型，保持前后端路径定义一致

这样一套下来，路径拼写错误、参数漏传、类型错配，统统在写代码时就被拦下。