Typescript: Location interface typing for params should be more permissive

[johannpinson]

Version

3.0.2

Reproduction link

https://codesandbox.io/s/mjjz2zlr8x?fontsize=14

Steps to reproduce

It just needs to follow the guide on https://router.vuejs.org/guide/essentials/navigation.html
By adding this:

const userId = 123
this.$router.push({ name: 'user', params: { userId }})

I got this TS error in VSCode:

Argument of type '{ name: string; params: { userId: number; }; }' is not assignable to parameter of type 'RawLocation'.
  Type '{ name: string; params: { userId: number; }; }' is not assignable to type 'Location'.
    Types of property 'params' are incompatible.
      Type '{ userId: number; }' is not assignable to type 'Dictionary<string>'.
        Property 'userId' is incompatible with index signature.
          Type 'number' is not assignable to type 'string'.

What is expected?

The property params in the interface Location must be more permissive that just the String type as value

What is actually happening?

If I try to pass a number or a boolean, there is an unexpected error

[posva]

Numbers will be added once automatic casting for numbers happens. Boolean won't because true coming from the url is a valid string, so you are responsible for casting props

For the moment, using always strings is the right way, the typings are good

[alirezajs]

try it by following code
this.$router.push({ name: 'user', params: { userId.toString() }})

[gleolee]

Same warnning, but my param type is Array, should I change it to string?

[davide1995]

I wrote userId as any and works fine

[parsajiravand]

Add as string
EX:
<NuxtLink :key="extraLinkIndex" :to="localepath(extraLinkItem.link as string)" class="mx-2 hover:text-blue-700 text-gray-600 dark:text-gray-300" active-class="!text-blue-700 dark:!text-blue-500"> {{ extraLinkItem.title }} </NuxtLink>