Allow a user to configure RouteParams and RouteParamsRaw through TypesConfig

[jackpercy-acl]

What problem is this solving

RouteParams and RouteParamsRaw both support the types being string | string[] in order to accommodate repeatable params.

This causes an annoyance in applications where repeatable params are never used and never will be used, resulting in the codebase being littered with as string or .toString().

Having just completed a Vue 3 upgrade of a large application, we now have hundreds of Typescript warnings due to this added feature.

We started to go through the process of declaring a TypesConfig type which can be used to override $route, $router, etc, but there is a lot to configure here to change all of the params to only be a string not string[]. This also will not cover usages of useRoute and useRouter as we migrate our application from the options API to the composition API as these are not part of TypesConfig.

Proposed solution

In order to not be a breaking change, support can be added to TypesConfig to make this an opt-in change for the user.

Currently, RouteParams and RouteParamsRaw are defined as:

export declare type RouteParams = Record<string, RouteParamValue | RouteParamValue[]>;

export declare type RouteParamsRaw = Record<string, RouteParamValueRaw | Exclude<RouteParamValueRaw, null | undefined>[]>;

The proposed changed would make these conditional types from TypesConfig:

export declare type RouteParams = TypesConfig extends Record<'RouteParams', infer T>
  ? T
  : Record<string, RouteParamValue | RouteParamValue[]>

export declare type RouteParamsRaw = TypesConfig extends Record<'RouteParamsRaw', infer T>
  ? T
  : Record<string, RouteParamValueRaw | Exclude<RouteParamValueRaw, null | undefined>[]>

The user is then able to configure this in their code with:

declare module 'vue-router' {
  interface TypesConfig {
    RouteParams: Record<string, string>;
    RouteParamsRaw: Record<string, string>;
  }
}

Describe alternatives you've considered

No response

[posva]

Duplicate of #1160

[posva]

You should give https://github.com/posva/unplugin-vue-router a try, it automatically generates the types of the params for you 🪄

[jackpercy-acl]

Yes, we are aware of this plugin - thank you though. Migrating an application to file base routing could (and would be for us) a large change.

The proposed change would be simple to implement and greatly simplify the change needed for anyone who does not need repeatable params or want/be able to use unplugin-vue-router.