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

【问题标题】：What is the return Type signature for an async import of a Vue.js SFC component?异步导入 Vue.js SFC 组件的返回类型签名是什么？
【发布时间】：2022-03-21 17:08:44
【问题描述】：

当使用 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<...> |异步组件工厂<...>'。类型“() => Promise”不可分配给类型“AsyncComponentPromise”。类型“Promise”不可分配给类型“void |”承诺 |功能组件选项，道具定义>> |组件选项<...> | EsModuleComponent>'。类型“Promise”不可分配给类型“Promise |功能组件选项，道具定义>> |组件选项<...> | EsModuleComponent>'。类型 'Vue' 不可分配给类型 'VueConstructor |功能组件选项，道具定义>> |组件选项<...> | EsModuleComponent'。 “Vue”类型中缺少属性“default”，但在“EsModuleComponent”类型中是必需的。

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

【问题讨论】：

据我所知，应该是(): Promise<EsModuleComponent> => ...。它有效吗？ AsyncComponentPromise 类型是指整个函数。

标签： vue.js typescript-eslint

【解决方案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;

【讨论】：