Type route id and params together

[Stadly]

Describe the problem

import { resolve } from "$app/paths";
import { page } from "$app/state";

// TypeScript does not know that the params will always match the route id here:
resolve(page.route.id, page.params)

Describe the proposed solution

Would it be possible to let TypeScript know that the params match the route id if we put params inside route? So instead of having page.route.id be any RouteId and page.params be any Params, page.route would be something like

type Route =
  | { id: "/"; params: never }
  | { id: "/admin/[id]"; params: { id: string } }
  | { id: "/[locale=locale]/test"; params: { locale: "en" | "nb" } };

Then I think TypeScript would be able to know that params match id, and would not complain on resolve(page.route.id, page.route.params).

Alternatives considered

No response

Importance

nice to have

Additional Information

No response

[elliott-with-the-longest-name-on-github]

Huh. This is kind of cool. I need to discuss it with the team but I think I'd be in favor of it.

[elliott-with-the-longest-name-on-github]

Coming back to this... what is the practical usefulness of this? Under what circumstances would you not just use page.url.pathname (which is what page.route.id and page.params are going to resolve to)?

[Stadly]

Here is one: If you have all your routes nested inside a [locale] folder, like this:

routes
  [locale]
    admin
      +page.svelte
    blog
      +page.svelte
      [slug]
        +page.svelte
    +page.svelte

Then you can get alternate lang links the current route by doing resolve(page.route.id, { ...page.route.params, locale: "..." }).

resolve(page.route.id, { ...page.params, locale: "..." }) would also work, but TypeScript will yell at you because it does not know that slug will be part of the params whenever the route id is [locale]/blog/[slug].