Upgrading to TypeScript 3.7 yields vue-router type error with composition-api

[aaf-ww]

Version

3.1.3

Reproduction link

https://github.com/aaf-ww/vue-router-typescript-bug

Steps to reproduce

Scaffold a new project with CLI (TypeScript/Babel/vue-router/etc), install @vue/composition-api then upgrade to TypeScript 3.7.2

vue create project-name (select all options)
npm install @vue/composition-api
npm update typescript@latest -D

What is expected?

No type errors.

What is actually happening?

ERROR in C:/Users/x/Desktop/source/vue-router-typescript-bug/src/router/index.ts(24,30):
24:30 Argument of type '{ mode: "history"; base: any; routes: ({ path: string; name: string; component: VueProxy<ComponentPropsOptions, Data>; } | { path: string; name: string; component: () => Promise<...>; })[]; }' is not assignable to parameter of type 'RouterOptions'.
Types of property 'routes' are incompatible.
Type '({ path: string; name: string; component: VueProxy<ComponentPropsOptions, Data>; } | { path: string; name: string; component: () => Promise<typeof import("C:/Users/x/Desktop/source/vue-router-typescript-bug/src/views/About.vue")>; })[]' is not assignable to type 'RouteConfig[]'.
Type '{ path: string; name: string; component: VueProxy<ComponentPropsOptions, Data>; } | { path: string; name: string; component: () => Promise<typeof import("C:/Users/x/Desktop/source/vue-router-typescript-bug/src/views/About.vue")>; }' is not assignable to type 'RouteConfig'.
Type '{ path: string; name: string; component: VueProxy<ComponentPropsOptions, Data>; }' is not assignable to type 'RouteConfig'.
Types of property 'component' are incompatible.
Type 'VueProxy<ComponentPropsOptions, Data>' is not assignable to type 'VueConstructor | ComponentOptions<Vue, DefaultData, DefaultMethods, DefaultComputed, PropsDefinition<...>, Record<...>> | AsyncComponentPromise<...> | AsyncComponentFactory<...> | undefined'.
Type 'ComponentOptions<Vue, { [x: string]: unknown; }, never, never, ComponentPropsOptions, ExtractPropTypes<ComponentPropsOptions, false>> & VueConstructorProxy<...>' is missing the following properties from type 'VueConstructor': extend, nextTick, set, delete, and 9 more.
22 | ];
23 |

24 | const router = new VueRouter({
| ^
25 | mode: "history",
26 | base: process.env.BASE_URL,
27 | routes
Version: typescript 3.7.2

[Domenico-Pirozzi]

I have the same issue. Any news?

[s-hashimoto00]

This issue looks the same as vuejs/composition-api#185

The same problem occurred, but it was solved by defining an empty “props”.

export default createComponent({
  props: {}
})

[lmiller1990]

An alternative until this is fixed is:

// @ts-ignore <- ignore it
const router = new VueRouter({
  routes,
  mode: 'history'
})

This may seem hacky, but I think it's better than adding empty props key to every component (did not work for me).

[keithn]

This may seem hacky, but I think it's better than adding empty props key to every component (did not work for me).

@lmiller1990 did you try the suggestion from the post above yours to add props:{} ? seemed to work for me

[lmiller1990]

I did, but then I need to add an empty props key to a large number of components. I'm happy to just ts-ignore for now. Wonder what the fix is for this? Might take a look and try and make a PR.

[LinusBorg]

typecasting the imported component also works as a workaround:

{
  path: '/users',
  component: Users as VueConstructor<Vue>
}

[kouchanne]

I worked around this problem by this code.

{
  path: '/users',
  component: () =>
      import("../views/User.vue")
}

[kristinruben]

@posva I noticed you added the contribution welcome tag! I am interested in working on TypeScript/Vue 3 compatibility - will have time to get started in the next week.

[LinusBorg]

Hey Kristin, awesome! Just to make sure: this issue is about compatibility with the Vue 2 plugin, not Vue 3.

But you're welcome to contribute to both :)

[posva]

It may be that the problem is at vuejs/composition-api#185 too, ending up in no contribution here

[haoqunjiang]

I believe it's fixed in @vue/composition-api v0.4