Reactjs 如何导入Firebase Auth、Firestore和Firebase存储节点包及其TypeScript'；什么类型的人在课堂上？

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

设置：

• VS代码
• 打字稿3.9
• TSLint 5
• Lerna multirepo+纱线工作区，包括：
• @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类的代码：

从'@firebase/app'导入应用程序
从“@firebase/app types”导入{FirebaseApp}
导入“@firebase/firestore”
从'@firebase/firestore-types'导入{FirebaseFirestore}
导入'@firebase/auth'
从'@firebase/auth types'导入{FirebaseAuth}
导入“@firebase/storage”
从'@firebase/storage types'导入{FirebaseStorage}
从“./config”导入firebaseConfig
出口级火基{
应用程序：FirebaseApp
auth:FirebaseAuth
db:FirebaseFirestore
firestore:FirebaseFirestore
文件：FirebaseStorage
构造函数（）{
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=新的firebase（）
导出默认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（）上

在this.db=app.firestore（）和this.firestore=app.firestore（）上

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

---

好的。。。真是一团糟。我读了好几本教程，但从现在起我就不懂了。您能帮忙吗？

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

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

---

以下是Doug在回答中讨论的新代码：

从“firebase/app”导入应用程序
导入“firebase/firestore”
导入“firebase/auth”
导入“firebase/storage”
从“./config”导入firebaseConfig
出口级火基{
app:app.app.app
auth:app.auth.auth
db:app.firestore.firestore
firestore：（app？：app.app.app |未定义）=>app.firestore.firestore
文件：app.storage.storage
构造函数（）{
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=新的firebase（）
导出默认firebase

---

这次没有错误。

嗨，道格，谢谢你的回答。当我键入“Thread”时，会出现这种类型的错误：错误：找不到“@project”所需的包“firebase/auth@^0.14.9”/apps@0.0.10在“npm”注册表中，“Lerna add”错误也非常严重：Lerna ERR！错误：包名称“firebase/app types”无效：名称只能包含URL友好字符lerna ERR！在invalidPackageName（C:\Users\me\AppData\Roaming\npm\node\u modules\lerna\node\u modules\npm package arg\npa.js:86:15）中，我不知道有关纱线的信息。我使用npm来安装模块。我不确定这是否是问题的根源。到目前为止，我一直在使用带有作者/模块名称的@for all modules，但没有出现任何问题。好吧，这个@我想你的回答意味着你没有看到具体的问题。所以可能只是奇怪的打字错误。我将看到一旦我将能够启动应用程序。谢谢

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