如何用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()）能根据路径自动推导出所需参数对象的结构。