Generate mapped types from const Object

Ewan 0
Viewed 51

I have the following object ( this defines the Angular routing / pages. Some have params that can be replaced.):

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

Can I create a type of valid page types from this object that ignores the params (:xxx) in the path with some sort of wildcard?

Ie. create a type like below (but using the ROUTES object). I have it already without the wildcard. However, paths with params resolved ie. /about/xxxxx do not meet the type check`

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

In summary, I would like to map though each property in ROUTES and create a type that replaces /:any string/ with /${string}

I hope this all makes sense. I'm trying to replace runtime errors with build errors.

typescript angular
2 Answers

You can use some recursive conditional types to process the path. Wen we encounter :name we can replace it with a $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

We use tail recursive conditional types to improve performance of these types in the compiler

Titian Cernicova-Dragomir0

The other answer here is correct. For completeness, this is how I did it:

type SubstParamNames<T extends string, S extends string = string, A extends string = ""> =
  T extends `${infer F}:${infer _}/${infer R}` ? SubstParamNames<R, S, `${A}${F}${S}/`>
  : T extends `${infer F}:${infer _}` ? `${A}${F}${S}` : `${A}${T}`

The SubstParamNames<T, S> type is a tail recursive conditional type that substitutes all colon-delimited path fragments (starts with a ":" and ends with a "/" or the end of the string) in T with the value in S, which defaults to just string.

That gives the following output:

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

type Routes = SubstParamNames<typeof ROUTES[keyof typeof ROUTES]>
/* type RP = type Routes = "/hello/page/two" | `/about/${string}` | 
 `/page/page/${string}/${string}` | `/who/${string}/${string}/${string}/page`
*/

And if it matters, you could change string to something else:

type IfItMatters = SubstParamNames<"/ay/:bee/cee/:dee/eee", "XXX">
// type IfItMatters = "/ay/XXX/cee/XXX/eee"

Playground link to code

jcalz0
Related