如何在整个 Typescript 项目中使用动态导入和 webpack 块的类型？

Question

我正在尝试在 Typescript 项目中延迟加载 firebase 并希望让 webpack 将 firebase 放到一个单独的块中。 代码是：

let asyncFirestore: firebase.firestore.Firestore    
export default async () => {
  if (isNil(asyncFirestore)) {
    asyncFirestore = await import(/* webpackChunkName: "chunk-firebase" */ 'firebase/app').then(
      firebase => {
        firebase.initializeApp(firebaseConfig)
        return firebase.firestore()
      }
    )
  }
  return asyncFirestore
}

在这个模块中，我想在其他模块中使用延迟加载的 Firebase。 不幸的是，firebase 目前没有被放到一个单独的 webpack 块中。 在我的项目中分离其他块正常工作（ target和module设置为esnext在tsconfig）。

目前，我正在其他模块中import firebase from 'firebase/app'因此我可以访问firebase.firestore.FieldValue.serverTimestamp() 。

我是否需要在整个项目中避免所有那些 webpack 能够将 firebase 放入单独块的导入？ 然后我将如何在整个项目中访问 firebase 类型，例如函数返回值？

Answer 1

当您将某个模块异步导入到您的代码中时，该模块的类型仅在您从导入分配的变量范围内可见。 在您的情况下， asyncFirestore在声明它的匿名函数的主体中仅具有特定类型。 在该函数之外，TypeScript 将其视为any ，因为调用代码尚未导入该类型。

此外，我认为 webpack 不会让您轻松动态地知道模块的最终路径，因为它会破坏这些模块的名称以完成其工作。 静态导入没有这个问题，因为 webpack 能够在编译时确定你想要什么。

您可能需要考虑一种完全不同的策略。 一件事是引入一个完全处理 Firebase 的模块，使用静态导入来获取仅在该模块中使用的所有 Firebase 类型，并且仅导出由 Firebase API 产生的其他类型的对象。