TypeScript 怎么用模板字面量类型构建类型安全的路由？

Question

仓乃文 · Accepted Answer

路由字符串如 "/users/:id" 中动态参数没有类型约束，拼写错误或参数名不一致不会报错。模板字面量类型可以在类型层面构建和匹配字符串模式，实现路由参数的自动推导和校验。基础模板字面量： ```typescript type HTTPMethod = "GET" | "POST" | "PUT" | "DELETE"; type APIRoute = `/api/${string}`; type Endpoint = `${HTTPMethod} ${APIRoute}`; // "GET /api/users" | "POST /api/users" | ... ``` 提取路由参数名： ```typescript type ExtractParams = T extends `${string}:${infer Param}/${infer Rest}` ? Param | ExtractParams : T extends `${string}:${infer Param}` ? Param : never; type UserParams = ExtractParams<"/users/:userId/posts/:postId">; // "userId" | "postId" ``` 构建参数对象类型： ```typescript type RouteParams = Record, string>; type UserRouteParams = RouteParams<"/users/:userId/posts/:postId">; // { userId: string; postId: string } ``` 补充说明： - 模板字面量类型是 TS 4.1+ 引入 - 配合 infer 可以实现字符串的模式匹配 - 内置 Uppercase/Lowercase/Capitalize/Uncapitalize 工具类型 - 适合路由系统、事件名、CSS 类名等字符串模式场景 - 复杂递归模板类型可能导致编译变慢