时间戳

首页 > 解决方案 > 如何通过动态导入和 webpack 块在整个 Typescript 项目中使用类型？

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

问题描述

我正在尝试在 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并在 tsconfigmodule中设置）。esnext

目前我import firebase from 'firebase/app'在其他模块中做，所以我可以访问诸如firebase.firestore.FieldValue.serverTimestamp().

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

标签： typescriptfirebasewebpack

解决方案

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

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

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

推荐阅读