How to use generated "Route<T>" type (from "typedRoutes") with dynamic routes

[borispetrovdev]

TL;DR: In the following example code, why am I getting the error "/dynamic/foo"' is not assignable to type 'Route', despite the existence of the route /dynamic/[some_param]?

Details: I'm trying to achieve type-safe redirect (and revalidatePath) calls using the experimental typedRoutes feature. Since typedRoutes doesn't automatically ensure that strings passed to redirect correspond to existing routes (it seems to only type-check the href prop of <Link>), I am declaring a typedRoute: Route variable and then passing it to redirect. However, I'm getting a typescript error essentially saying that the string I've assigned to typedRoute is not a valid Route.

As you can see in the folder structure pictured in the screenshot above, I have a route /dynamic/[some_param], so the string "/dynamic/foo" should indeed be a valid Route. In fact, when I inspect the Route<T> type, I see /dynamic/$__next_route_internal_types_SafeSlug<infer _ extends string>}, so the route is correctly detected by typedRoutes, but I can't seem to access it when I'm assigning types (and values) to variables:

Ideally, I would write const typedRoute: Route = "/dyna" and get an autocomplete saying /dynamic/${string}. What am I missing?

[controversial]

You have to also provide the string as a parameter to the Route type:

const typedRoute: Route<'/dynamic/foo'> = '/dynamic/foo';

when the Route type is used in context (e.g. in the<Link> component) the type parameter is usually inferred, however, if you’re referring to the Route type explicitly, you need to make sure the appropriate type parameter is passed, rather than the default Route<string>.

Also, I’d recommend using satisfies over type annotations in this case, in order to preserve a more specific type:

const typedRoute = '/dynamic/foo' satisfies Route<'/dynamic/foo'>;

---

If you want to simplify the syntax so that the type parameter can be inferred in context, you could make a function that infers the type parameter:

function typedRoute<T extends string>(route: Route<T>) {
  return route;
}

const myRoute = typedRoute('/dynamic/foo');
// myRoute has type Route<'/dynamic/foo'>, and will error if an invalid route is passed

[uncvrd]

thanks for this solution, typedRoute works! kinda stinks that you dont get autocomplete for dynamic routes but I guess it makes sense...