Vue.js SFC 组件异步导入的返回类型签名是什么？

Question

使用动态导入 Vue 单文件组件时，promise 中的返回类型是什么？

{
  … components: [ () => import('../components/MyComponent.vue')], …
}

typescript-eslint 会通知我Missing return type on function在整个项目中我理解和欣赏的内容，所以不想关闭这个警告。

但是它返回的类型是什么？

我用过了：

(): Promise<Vue> => import(…)
(): Promise<VueConstructor<Vue>> => import(…)
(): AsyncComponentPromise<Vue> => import(…)
(): Promise<unknown> => import(…)

最后一个在 IDE linting 期间没问题，但在编译时失败。每次尝试都会导致与我不明白的丢失重载相关的错误：

类型 '() => Promise' 不可分配给类型 'VueConstructor | 功能组件选项> | 组件选项> | AsyncComponentPromise<...> | AsyncComponentFactory<...>'。类型 '() => Promise' 不可分配给类型 'AsyncComponentPromise'。类型 'Promise' 不可分配给类型 'void | 承诺 | FunctionalComponentOptions, PropsDefinition>> | 组件选项<...> | EsModuleComponent>'。类型 'Promise' 不可分配给类型 'Promise | FunctionalComponentOptions, PropsDefinition>> | 组件选项<...> | EsModuleComponent>'。类型 'Vue' 不能分配给类型 'VueConstructor | FunctionalComponentOptions, PropsDefinition>> | 组件选项<...> | EsModuleComponent'。“Vue”类型中缺少属性“default”，但“EsModuleComponent”类型中需要。

这仅在使用动态/异步导入方法时才相关，那么要使用的正确返回签名是什么？

Answer 1

也许这就是要走的路。但我将路由对象定义为“RouteConfig”对象。

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