Vue-router: Typescript: `Location` interface typing for params should be more permissive

Created on 21 Mar 2019  路  4Comments  路  Source: vuejs/vue-router

Version

3.0.2

Reproduction link

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

Capture d鈥檈虂cran 2019-03-21 a虁 14 43 46

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

All 4 comments

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

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

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

I wrote userId as any and works fine

Was this page helpful?
0 / 5 - 0 ratings