如何在一个类中导入 Firebase Auth、Firestore 和 Firebase Storage 节点包以及它们的 TypeScript 类型？

Question

我需要导入 Firebase 包并将它们放入一个必须与 Next.js 和 React Native 兼容的模块的类中。这对于 React Native 版本非常有效，但我不太习惯使用 TypeScrit 进行 React 并遇到一些问题。

设置：

• VS 代码
• TypeScript 3.9
• TSLint 5
• Lerna multirepo + Yarn 工作区：
• @project/apps 通用包（我们在这里）
• 使用此文件的带有 next.js 的 @project/web 包
• 一个用于 React native 的 @project/mobile 包，使用此文件的 .native.ts 版本

这里是 tsconfig.json：

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noUnusedLocals": true,
    "removeComments": true,
    "noLib": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "declaration": true
  },
  "exclude": ["node_modules", "**/*.spec.ts", "**/__tests__/*", "babel.config.js", "metro.config.js", "jest.config.js"]
}

这里是 tslint.json:

{
  "extends": ["tslint:recommended", "tslint-config-prettier"],
  "rules": {
    "object-literal-sort-keys": false,
    "interface-name": false,
    "member-access": [true, "no-public"],
    "ordered-imports": false,
    "no-console": false
  }
}

这是 Firebase 类的代码：

import app from '@firebase/app'
import { FirebaseApp } from '@firebase/app-types'
import '@firebase/firestore'
import { FirebaseFirestore } from '@firebase/firestore-types'
import '@firebase/auth'
import { FirebaseAuth } from '@firebase/auth-types'
import '@firebase/storage'
import { FirebaseStorage } from '@firebase/storage-types'

import firebaseConfig from './config'

export class Firebase {
  app: FirebaseApp
  auth: FirebaseAuth
  db: FirebaseFirestore
  firestore: FirebaseFirestore
  files: FirebaseStorage

  constructor() {
    app.initializeApp(firebaseConfig)
    this.app = app.app()
    this.auth = app.auth()
    this.db = app.firestore()
    this.firestore = app.firestore
    this.files = app.storage()
  }
}

const firebase = new Firebase()
export default firebase

我有几个问题：

@firebase/firestore 导入时：

Could not find a declaration file for module '@firebase/firestore'. 'c:/code/project/node_modules/@firebase/firestore/dist/index.node.cjs.js' implicitly has an 'any' type.
  Try `npm install @types/firebase__firestore` if it exists or add a new declaration (.d.ts) file containing `declare module '@firebase/firestore';`ts(7016)

关于 this.auth = app.auth() 和 this.files = app.storage()

Cannot invoke an object which is possibly 'undefined'.ts(2722)

在 this.db = app.firestore() 和 this.firestore = app.firestore 上

Property 'firestore' does not exist on type 'FirebaseNamespace'.ts(2339)

好吧...这是一团糟。我阅读了几个教程，但从现在开始我不明白。你能帮忙吗？

Answer 1

当我为 Firebase 使用 TypeScript 时，我不使用任何以“@”开头的包。一切都可以很好地导入，如documentation 所示。从该页面：

// Firebase App (the core Firebase SDK) is always required and must be listed first
import * as firebase from "firebase/app";

// If you enabled Analytics in your project, add the Firebase SDK for Analytics
import "firebase/analytics";

// Add the Firebase products that you want to use
import "firebase/auth";
import "firebase/firestore";

Answer 2

这是新代码，遵循 Doug 回答中的讨论：

import app from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'
import 'firebase/storage'

import firebaseConfig from './config'

export class Firebase {
  app: app.app.App
  auth: app.auth.Auth
  db: app.firestore.Firestore
  firestore: (app?: app.app.App | undefined) => app.firestore.Firestore
  files: app.storage.Storage

  constructor() {
    app.initializeApp(firebaseConfig)
    this.app = app.app()
    this.auth = app.auth()
    this.db = app.firestore()
    this.firestore = app.firestore
    this.files = app.storage()
  }
}

const firebase = new Firebase()
export default firebase

这次没有错误。