When using dynamic imports of Vue Single File Components, what is the return type inside the promise?
{
… components: [ () => import('../components/MyComponent.vue')], …
}
typescript-eslint will notify me Missing return type on function
which I understand and appreciate throughout the project so do not want to turn this warning off.
But what is the type that it returns?
I have used:
(): Promise<Vue> => import(…)
(): Promise<VueConstructor<Vue>> => import(…)
(): AsyncComponentPromise<Vue> => import(…)
(): Promise<unknown> => import(…)
The last of these is fine during IDE linting but fails at compile time. Each attempt results errors related to missing overloads that I don't understand:
Type '() => Promise' is not assignable to type 'VueConstructor | FunctionalComponentOptions> | ComponentOptions> | AsyncComponentPromise<...> | AsyncComponentFactory<...>'. Type '() => Promise' is not assignable to type 'AsyncComponentPromise'. Type 'Promise' is not assignable to type 'void | Promise | FunctionalComponentOptions, PropsDefinition>> | ComponentOptions<...> | EsModuleComponent>'. Type 'Promise' is not assignable to type 'Promise | FunctionalComponentOptions, PropsDefinition>> | ComponentOptions<...> | EsModuleComponent>'. Type 'Vue' is not assignable to type 'VueConstructor | FunctionalComponentOptions, PropsDefinition>> | ComponentOptions<...> | EsModuleComponent'. Property 'default' is missing in type 'Vue' but required in type 'EsModuleComponent'.
This is only relevant when using the dynamic/async import methodology, so what is the correct return signature to use?
(): Promise<EsModuleComponent> => ...
. Does it work? AsyncComponentPromise type refers to the whole function.