diff --git a/types/options.d.ts b/types/options.d.ts index 323c7630986..ff266052feb 100644 --- a/types/options.d.ts +++ b/types/options.d.ts @@ -12,9 +12,10 @@ export type Component, Methods=DefaultMethods, Co | FunctionalComponentOptions | ComponentOptions -interface EsModuleComponent { - default: Component -} +type EsModule = T | { default: T } + +type ImportedComponent, Methods=DefaultMethods, Computed=DefaultComputed, Props=DefaultProps> + = EsModule> export type AsyncComponent, Methods=DefaultMethods, Computed=DefaultComputed, Props=DefaultProps> = AsyncComponentPromise @@ -23,12 +24,12 @@ export type AsyncComponent, Methods=DefaultMethods, Methods=DefaultMethods, Computed=DefaultComputed, Props=DefaultProps> = ( resolve: (component: Component) => void, reject: (reason?: any) => void -) => Promise | void; +) => Promise> | void; export type AsyncComponentFactory, Methods=DefaultMethods, Computed=DefaultComputed, Props=DefaultProps> = () => { - component: AsyncComponentPromise; - loading?: Component | EsModuleComponent; - error?: Component | EsModuleComponent; + component: Promise>; + loading?: ImportedComponent; + error?: ImportedComponent; delay?: number; timeout?: number; } diff --git a/types/test/async-component-test.ts b/types/test/async-component-test.ts new file mode 100644 index 00000000000..baa50c4b915 --- /dev/null +++ b/types/test/async-component-test.ts @@ -0,0 +1,44 @@ +import Vue, { AsyncComponent, Component } from "../index"; + +const a: AsyncComponent = () => ({ + component: new Promise((res, rej) => { + res({ template: "" }) + }) +}) + +const b: AsyncComponent = () => ({ + // @ts-expect-error component has to be a Promise that resolves to a component + component: () => + new Promise((res, rej) => { + res({ template: "" }) + }) +}) + +const c: AsyncComponent = () => + new Promise((res, rej) => { + res({ + template: "" + }) + }) + +const d: AsyncComponent = () => + new Promise<{ default: Component }>((res, rej) => { + res({ + default: { + template: "" + } + }) + }) + +const e: AsyncComponent = () => ({ + component: new Promise<{ default: Component }>((res, rej) => { + res({ + default: { + template: "" + } + }) + }) +}) + +// Test that Vue.component accepts any AsyncComponent +Vue.component("async-compponent1", a)