You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
So far I have been using ts-toolbelt to create a function that receives a raw Next.js route path, and returns the appropriate prop types that route will use. So, it goes through all the route segments and:
Transforms [mySegment] to { mySegment: string }
Transforms [...mySegment] to { mySegment: [string, ...string[]] }
Transforms [[...mySegment]] to { mySegment?: [string, ...string[]] }
Then, I loop through all the segments, get the props for each segment, and join all the props from the segments, using the following function (live repro: https://tsplay.dev/N5xKVw):
typeHome=RouteParams<"/">// ^? type Home = {}typeProjects=RouteParams<"/projects">// ^? type Projects = {}typeProject=RouteParams<"/projects/[projectSlug]">// ^? type Project = { projectSlug: string; }typeProjectTasks=RouteParams<"/projects/[projectSlug]/tasks">// ^? type ProjectTasks = { projectSlug: string; }typeProjectTask=RouteParams<"/projects/[projectSlug]/tasks/[taskSlug]">// ^? type ProjectTask = { projectSlug: string; taskSlug: string; }typeProjectDoc=RouteParams<"/projects/[projectSlug]/docs/[...docSlug]">// ^? type ProjectDoc = { projectSlug: string; docSlug: [string, ...string[]]; }typeProjectFile=RouteParams<"/projects/[projectSlug]/files/[[...fileSlug]]">// ^? type ProjectFile = { projectSlug: string; fileSlug?: [string, ...string[]] | undefined; }
I would love to practice more functional programming, and give this library a chance, is there any recommended way to do it? So far I have tried the following (live repro: https://tsplay.dev/NDdpVN):
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
Uh oh!
There was an error while loading. Please reload this page.
-
So far I have been using
ts-toolbelt
to create a function that receives a raw Next.js route path, and returns the appropriate prop types that route will use. So, it goes through all the route segments and:[mySegment]
to{ mySegment: string }
[...mySegment]
to{ mySegment: [string, ...string[]] }
[[...mySegment]]
to{ mySegment?: [string, ...string[]] }
Then, I loop through all the segments, get the props for each segment, and join all the props from the segments, using the following function (live repro: https://tsplay.dev/N5xKVw):
Having this output:
I would love to practice more functional programming, and give this library a chance, is there any recommended way to do it? So far I have tried the following (live repro: https://tsplay.dev/NDdpVN):
... but I am stuck and haven't found a way to
infer
the param name withinMatch.With
😅Beta Was this translation helpful? Give feedback.
All reactions