In order to proceed with writing a function of type IRouteToPaths<T>, we have some adjustments to make first.
type AllRoutes = IRouteToPaths<typeof routes>;
This function will generate a union of paths as shown below:
/* type AllRoutes =
"" |
"/dashboard" |
"/settings" |
"/settings/notifications" |
"/settings/profile" |
"/settings/profile/picture"
*/
If you explicitly specify the type of routes as IRoute, the compiler will only recognize routes based on that information, losing any specific details about the initializer and hindering the extraction of a path union from routes:
const routes: IRoute = { ... }
type RootPath = typeof routes.path;
// type RootPath = string // 🤷♂️
type RootChildren = typeof routes.children;
// type RootChildren = IRoute[] | undefined // 🤷♀️
It would be best to let the compiler infer the type of routes, and then verify it against IRoute afterwards if necessary, potentially utilizing the new satisfies operator:
const routes = { ... } satisfies IRoute;
Moreover, an object like
{path: children: [{path: "a"}, {path: "b"}]
may get inferred as type
{path: string, children: {path: string}[]}
, which contains more data than
IRoute, but still lacks enough for extracting the union of paths. To retain the literal types of the
path properties and subproperties, employ a
const assertion:
const routes = { ... } as const satisfies IRoute;
Additionally, using const assertions results in inferring readonly tuple types. To avoid complications, adjust IRoute so that the children property can also be readonly:
interface IRoute {
readonly path: string,
readonly children?: readonly IRoute[]
}
We are now ready to define IRouteToPaths. Here is one possible implementation:
type IRouteToPaths<T extends IRoute> =
T extends IRoute ? `${T['path']}${"" | (
T['children'] extends readonly (infer R extends IRoute)[] ? IRouteToPaths<R> : never
)}` : never
This is a recursive conditional type, handling base and recursive cases depending on the presence of children.
As a distributive conditional type,
IRouteToPaths<T1 | T2 | T3>
equals to
IRouteToPaths<T1> | IRouteToPaths<T2> | IRouteToPaths<T3>
. This property comes in handy when recursing into
children, allowing direct processing of each element's union through
IRouteToPaths.
The function indexes into the "path" property of T, returning a template literal type assembling paths and child unions.
Verification time. Let's apply the code:
const routes = {
path: '', children: [
{ path: '/dashboard' },
{
path: '/settings', children: [
{ path: '/notifications' },
{
path: '/profile', children: [
{ path: '/picture' },
]
}
]
}
]
} as const satisfies IRoute;
type AllRoutes = IRouteToPaths<typeof routes>
/* type AllRoutes =
"" |
"/dashboard" |
"/settings" |
"/settings/notifications" |
"/settings/profile" |
"/settings/profile/picture"
*/
All seems well.
View code in Playground