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

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>, 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>, 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>, 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>, Data>; }’ is not assignable to type ‘RouteConfig’. Types of property ‘component’ are incompatible. Type ‘VueProxy<ComponentPropsOptions<Data>, Data>’ is not assignable to type ‘VueConstructor<Vue> | ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<…>, Record<…>> | AsyncComponentPromise<…> | AsyncComponentFactory<…> | undefined’. Type ‘ComponentOptions<Vue, { [x: string]: unknown; }, never, never, ComponentPropsOptions<Data>, ExtractPropTypes<ComponentPropsOptions<Data>, false>> & VueConstructorProxy<…>’ is missing the following properties from type ‘VueConstructor<Vue>’: 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

[LinusBorg]

typecasting the imported component also works as a workaround:

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

[s-hashimoto00]

This issue looks the same as https://github.com/vuejs/composition-api/issues/185

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

export default createComponent({
  props: {}
})