我有以下对象(这定义了Angular 布线/页面.有些参数可以替换.):

const ROUTES = {
  PAGE_NO_PARAMS: '/hello/page/two',
  PAGE_R: '/about/:id',
  PAGE_Z: '/page/page/:param/:id',
  PAGE_N: '/who/:x/:y/:z/page',
} as const

我是否可以从该对象创建一种有效的页面类型,该对象使用某种通配符忽略路径中的参数(:xxx)?

即.创建如下所示的文字(但使用ROUTES对象).我已经没有通配符了.但是,带有参数的路径已解析,即./about/xxxxx不符合type判断`

type ValidRoute = '/hello/page/two' | '/about/${string}' | '/page/page/${string}/${string}'| '/who/${string}/${string}/${string}/page'

总之,我想映射ROUTES中的每个属性,并创建一个用/${string}替换/:any string/的类型

我希望这一切都说得通.我正在try 用构建错误替换运行时错误.

推荐答案

您可以使用一些递归条件类型来处理该路径.如果我们遇到:name,我们可以用$string}来代替它

type MakeValidRoute<T extends string, R extends string = ''> =
  T extends `${infer Head}/:${infer Name}/${infer Tail}`?
    MakeValidRoute<`/${Tail}`, `${R}${Head}/${string}`>:
  T extends `${infer Head}/:${infer Name}`?
    `${R}${Head}/${string}`:
    `${R}${T}`

Playground Link

我们使用尾递归条件类型来提高编译器中这些类型的性能

Typescript相关问答推荐

Angular 17 -如何在for循环内创建一些加载?

为什么从数组中删除一个值会删除打字错误?

如何在TypeScrip面向对象程序设计中用方法/属性有条件地扩展类

在数据加载后,如何使用NgFor在使用异步管道的可观测对象上生成子组件?

为什么&;(交集)运算符会删除不相交的属性?

APP_INITIALIZER在继续到其他Provider 之前未解析promise

@TANSTACK/REACT-QUERY中发生Mutations 后的数据刷新问题

从route.参数获取值.订阅提供";无法读取未定义";的属性

自定义 Select 组件的类型问题:使用带逗号的泛型类型<;T与不带逗号的<;T&>;时出错

在Google授权后由客户端接收令牌

TypeScrip:使用Cypress测试包含插槽的Vue3组件

为什么数字是`{[key:string]:UNKNOWN;}`的有效密钥?

如何处理可能为空的变量...我知道这不是Null?

如何根据Typescript 中带有泛型的对象嵌套键数组获取数组或对象的正确类型?

Typescript 确保通用对象不包含属性

我是否应该在 Next.js 中的服务器组件中获取秘密数据的所有函数中使用使用服务器?

如何在 TypeScript 类型定义中简化定义长联合类型

在 next.js 13.4 中为react-email-editor使用forwardRef和next/dynamic的正确方法

当受其他参数限制时,通用参数类型不会缩小

错误:NG04002:无法匹配任何路由. URL 段:学生