Typescript 该如何实现 react-router 的路由跳转的代码提示

[chenjustcam]

比如我现在有一些路由：

  type RoutesType = '/home' | '/login' | '/user/:id';

我想封装 useNavigate 来实现跳转时能进行代码提示，同时对于 '/user/:id' 能实现 id 动态可变。要怎么做类型体操才能实现这个需求，或者是有别的方案能实现路由的代码提示吗？

[hua123s]

你是在找 https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html ？

[chenjustcam]

@hua123s 我之前写出来大概是这样：
```typescript
type GetRoutes<T> = T extends `${infer Path}/:${infer Param}` ? `${Path}/${string}` : T;
type RoutesType = GetRoutes<'/home' | '/login' | '/user/:id'>
```
但是在实际的代码提示里就只显示 '/home' 和 '/login' 了，使用 '/user/123' 倒是能通过类型检测，但是没有代码提示...
btw: 头像是燕姿耶

[hua123s]

如果要提示建议这样吧。
type RoutesType = '/home' | '/login' | `/user/${number | 1}`;
type RoutesType = '/home' | '/login' | `/user/${number | ':id'}`;

[chenjustcam]

@hua123s 好的，谢谢你！