vue-router doesn't accept components created with DefineComponent()

[a161803398]

Version

2.7.6

Reproduction link

vue-2.7-router-issue

Steps to reproduce

1. run npm i
2. run npm run check

What is expected?

no type error

What is actually happening?

vue-tsc given following error.

src/router/index.ts:9:7 - error TS2322: Type 'ComponentPublicInstanceConstructor<Vue3Instance<Data, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{ title: string; }>>>, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{ title: string; }>>>, {}, {}, true, ComponentOptionsBase<...>> & ... 5 more ... & Readonly<...>, ... 4 more ..., MethodOptions>...' is not assignable to type 'Component | undefined'.
  Type 'ComponentPublicInstanceConstructor<Vue3Instance<Data, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{ title: string; }>>>, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{ title: string; }>>>, {}, {}, true, ComponentOptionsBase<...>> & ... 5 more ... & Readonly<...>, ... 4 more ..., MethodOptions>...' is missing the following properties from type 'VueConstructor<Vue<Record<string, any>, Record<string, any>, never, never, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, ... 4 more ..., ...>>>': extend, nextTick, set, delete, and 10 more.

9       component: TestPage,
        ~~~~~~~~~


Found 1 error in src/router/index.ts:9

---

It looks like a similar issue as composition-api #185.

The issue seems to be solved by modified ComponentPublicInstanceConstructor type to be mixed with VueConstructor.

diff --git a/types/v3-component-public-instance.d.ts b/types/v3-component-public-instance.d.ts
index a5bf6701..d616eff6 100644
--- a/types/v3-component-public-instance.d.ts
+++ b/types/v3-component-public-instance.d.ts
@@ -229,6 +229,6 @@ export type ComponentPublicInstanceConstructor<
   D = any,
   C extends ComputedOptions = ComputedOptions,
   M extends MethodOptions = MethodOptions
-> = {
+> = VueConstructor & {
   new (...args: any[]): T
 }

Reference from composition-api pull #189

[yyx990803]

Unfortunately the change will lead to an infinite loop in the type test suite. This should probably be fixed in a patch by vue-router.

I believe it can be fixed by changing this line to just use the Component type exported by Vue itself.

/cc @posva