Как использовать типы в проекте Typescript с динамическим импортом c и кусками веб-пакета?

Question

Я пытаюсь лениво загрузить firebase в проекте Typescript и хочу, чтобы 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 не помещается в отдельный блок веб-пакета. Разделение других чанков в моем проекте работает правильно (target и module установлено в esnext в tsconfig).

В настоящее время я выполняю import firebase from 'firebase/app' в других модулях, поэтому у меня есть доступ к таким вещам, как firebase.firestore.FieldValue.serverTimestamp().

Нужно ли мне избегать всех этих импортов по всему моему проекту, чтобы веб-пакет мог поместить Firebase в отдельный кусок? Как бы я тогда имел доступ к типам Firebase во всем проекте, например, для возвращаемых значений функции?

Answer 1

Когда вы асин c импортируете какой-либо модуль в свой код, типы этого модуля видны только в области действия переменной, которую вы присвоили при импорте. В вашем случае asyncFirestore имеет только определенный тип c в теле анонимной функции, в которой она объявлена. За пределами этой функции TypeScript видит ее как any, потому что вызывающий код не импортировал тип.

Также я думаю, что webpack не поможет вам динамически узнать окончательный путь модуля, так как он будет искажать имена этих модулей, чтобы выполнить свою работу. Stati c import не имеет такой проблемы, поскольку webpack может определить, что вы хотите во время компиляции.

Возможно, вы захотите рассмотреть совершенно другую стратегию. Одним из них было бы ввести модуль, который полностью работает с Firebase, использовать stati c import, чтобы получить все типы Firebase для использования только в этом модуле, и экспортировать только другие типы объектов, которые являются результатом API Firebase.