typescript 模板字面量类型可构建强类型路由参数系统，通过路径字面量联合类型编码结构与约束，配合 extractparams 工具类型自动推导参数对象，实现编译期校验非法路径、错类型参数及漏传字段。
用 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></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/目录）可利用文件路径生成对应类型，保持前后端路径定义一致
这样一套下来，路径拼写错误、参数漏传、类型错配，统统在写代码时就被拦下。
