如何让 TypeScript 识别 firebase 导入答案

【问题标题】：How to get TypeScript to recognize firebase import如何让 TypeScript 识别 firebase 导入
【发布时间】：2019-10-27 14:17:00
【问题描述】：

我正在尝试通过访问 firestore 客户端在小型 TypeScript Web 应用程序中显示来自 firestore 的内容。但是，tsc 无法编译，因为它找不到 firebase 模块。

在我的 index.html 的头部，我从 gstatic 中导入了 firebase-app.js，从 gstatic 中导入了 firebase-firestore.js，以及按此顺序编译的 script.js。我目前有 3 个 TypeScript 文件编译为单个 js 文件，我正在尝试将数据加载到三个文件中的第一个。

我的 index.html 在这里导入 head 中的三个脚本

    <script src="https://www.gstatic.com/firebasejs/6.1.1/firebase-app.js"></script>

    <script src="https://www.gstatic.com/firebasejs/6.1.1/firebase-firestore.js"></script>

    <script src="scripts/script.js" type="module"></script>

然后我的 tsconfig.json 使用这些选项编译这三个文件

{
    "compilerOptions": {
        "target": "esnext",
        "watch": true,
        "outFile": "public/scripts/script.js",
        "module": "system"
    },
    "files": [  
                "scripts/temp.ts",
                "scripts/loaddata.ts",
                "scripts/control.ts"
            ]
}

最后，temp.ts 的第一行是我导入时出错的地方

import * as firebase from 'firebase/app';
import 'firebase/firestore';

const firebaseConfig = {
//config here
}

firebase.initializeApp(firebaseConfig);

let db = firebase.firestore();

VS Code 给了我语法错误找不到模块“firebase/app”，因此无法编译。我尝试了几种不同的 firebase 和 app 组合，但未能成功导入模块。是否可以在使用 firebase/firestore 时将多个 TypeScript 文件编译成一个 javascript 文件？我成功地使用原始 JavaScript 检索了我的数据，但我更喜欢使用 TypeScript，因为我的项目的其余部分都是用 TypeScript 编写的！

【问题讨论】：

标签： typescript firebase import google-cloud-firestore

【解决方案1】：

    import firebase from '@firebase/app'
    import '@firebase/auth'

    firebase.auth().createUserWithEmailAndPassword(email, passowrd)

【讨论】：

【解决方案2】：

在您的应用中初始化 Firebase 并创建一个 Firebase 应用对象：

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
    
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

// Get a list of cities from your database
async function getCities(db) {
  const citiesCol = collection(db, 'cities');
  const citySnapshot = await getDocs(citiesCol);
  const cityList = citySnapshot.docs.map(doc => doc.data());
  return cityList;
}

或者使用这个：

// version 9 provides a set of compat packages that are API compatible with Version 8
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

【讨论】：