Type declaration incomplete for Location.query

[mickeyzoox]

Version

2.7.0

Reproduction link

https://jsfiddle.net/50wL7mdz/82013/ (This doesn't actually work, but shows the code you'd need locally to repro the bug)

Steps to reproduce

0. Note that JSFiddle doesn't appear to give Typescript compiler errors, so the repro linked will have to be ported into a local Typescript Vue project.

1. In a Typescript Vue project:

router.push({ query: { array: ["1", "2", "3"] }})

What is expected?

This should compile without error

What is actually happening?

You get an error:

 error TS2345: Argument of type '{ name: string; query: QueryParams; }' is not assignable to parameter of type 'RawLocation'.
  Type '{ name: string; query: QueryParams; }' is not assignable to type 'Location'.
    Types of property 'query' are incompatible.
      Type 'QueryParams' is not assignable to type 'Dictionary<string> | undefined'.
        Type 'QueryParams' is not assignable to type 'Dictionary<string>'.
          Index signatures are incompatible.
            Type 'string | string[] | undefined' is not assignable to type 'string'.
              Type 'undefined' is not assignable to type 'string'.

[posva]

@ktsn I couldn't find anything about Type 'string | string[] | undefined' is not assignable to type 'string' but that line doesn't make sense to me. Do you know this error?

[ktsn]

@posva No, I don't. In any cases, the snippet looks invalid as a repro since query won't accept number[] - the error should be Type 'number[]' is not assignable to type 'string'.
I suspect the error caused by the other place where QueryParams is used in OP's code.

[posva]

It's weird I was getting the same output but I don't anymore 😆
I was wondering if we should be more permissive about the query string because the user is able to provide custom query parsing (https://router.vuejs.org/en/api/options.html#parsequery--stringifyquery). I don't know if there's a smarter way to handle this though

[mickeyzoox]

@ktsn @posva I have made 2 updates to the OP (I apologize the original bug report I posted was not completely correct):

• I should have had strings in the repro not numbers. The repro doesn't work in JSFiddle (I'm not sure why, I assumed that JSFiddle ignores Typescript compilation errors). Locally this expression fails to compile for me.
• The vue-router version I use locally is 2.7.0 (based on the source code annotation I don't think 3.0.1 fixes my problem though).

I think the line that would cause my problem is that the type declaration https://github.com/vuejs/vue-router/blob/dev/types/router.d.ts#L110 is query?: Dictionary<string> when in fact vue-router also accepts query parameters that are string[] (this is true even if the user doesn't specify custom query parsing). This feature seems to be undocumented though.

You can verify that vue-router accepts for query values a string[] by visiting @posva 's JSFiddle at https://jsfiddle.net/posva/gnk3a044/1/ .

[zigomir]

I have same issue, string[] works as expected but current typings won't let me use it.

[zigomir]

This can be closed now with #2050 merged.

[posva]

thanks, I didn't see I wasn't closed

[Dinuz]

@posva @zigomir I am getting the same warning with params and named route.
It works, but in my IDE I get the annoying warning:

Argument type {name:string, params:{"0":string, status:string, msg:string}} is not assignable to parameter type RawLocation.

Why? I mean why it works when compiled, but i get the warning message in my console?

[posva]

It hasn't been released yet, it will be soon 🙂

[nicostuhlfauth]

@posva Any updates? When will there be a new release?

[mika76]

Getting this on vue-router 3.0.2...

[jordanboston]

I'm wondering how to resolve this as well? Any news?

[xyyVee]

Since query should be Dictionary<string>,Here is my soluction and works fine for me:

private editArticel(id: string) {
    const otherQuery: Dictionary<string> = {}
    otherQuery.id = id
    this.$router.push({
      path: './editArticle',
      query: otherQuery
    })
  }

[m-shum]

Has anyone figured this out? I keep getting Type 'LocationQueryValue | LocationQueryValue[]' is not assignable to type 'string | string[] | undefined'. when passing a computed value of a route query as a typed prop. Would be stellar to have some clear documentation on this.

in parent component:

const query = computed(() => useRoute().query.someKey)

in child component:

type TProps = {
query: string | string[] | undefined;
}