如何在类中导入Firebase Auth，Firestore和Firebase Storage节点程序包及其TypeScript的类型? [英] How do you import Firebase Auth, Firestore and Firebase Storage node packages as well as their TypeScript's types in a class?

问题描述

我需要导入Firebase软件包并将其放入必须与Next.js和React Native都兼容的模块的类中.这在React Native版本上很好用，但是我不习惯使用TypeScrit进行React并遇到服务器问题.

I need to import Firebase packages and get them into a class for a module that has to be compatible with both Next.js and React Native. This works pretty well for the React Native version but I'm less used to React with TypeScrit and encounter serveral issues.

设置:

• VS代码
• TypeScript 3.9
• TSLint 5
• Lerna multirepo + Yarn工作区:
• 一个@ project/apps通用软件包(我们在这里)
• 使用此文件的带有next.js的@ project/web软件包
• 使用此文件的.native.ts版本的@ local/React本机包

这是tsconfig.json:

Here is the 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:

here is the 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类的代码:

Here is the code of the Firebase class:

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导入中:

On @firebase/firestore import:

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()

on this.auth = app.auth() and this.files = app.storage()

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

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

on this.db = app.firestore() and this.firestore = app.firestore

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

好吧……真是一团糟.我读了几本教程，但从现在开始我不明白.你能帮忙吗?

Ok... It is a mess. I read several tutorials but I don't get it from now. Could you help?

推荐答案

当我将TypeScript用于Firebase时，我不会使用任何以"@"开头的软件包.如文档所示，一切都可以导入..在该页面上:

When I use TypeScript for Firebase, I don't use any packages that start with "@". Everything can be imported just fine, as illustrated in the documentation. From that page:

// 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";

这篇关于如何在类中导入Firebase Auth，Firestore和Firebase Storage节点程序包及其TypeScript的类型?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！