What is the return Type signature for an async import of a Vue.js SFC component?

user_1100265 0
Viewed 696

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?

typescript-eslint vue.js
1 Answers

Maybe that's the way to go. But I define my route object as a 'RouteConfig' object.

import { RouteConfig } from "vue-router";
export default  {
          name: "RouteNameTest",
          path: "test",
          meta: { test: 42 },
          component: () =>
            import(
              /* webpackChunkName: "test-chunk" */ "../views/test.vue"
            ),
        } as routeConfig;
user_1924680
Related