Cum să faci TypeScript să recunoască importul din Firebase

Încerc să afișez conținut din Firestore într-o mică aplicație web TypeScript accesând Firestore de pe partea clientului. Totuși, tsc nu reușește să compileze deoarece nu poate găsi modulul firebase.

În capul fișierului meu index.html, am importat firebase-app.js de la gstatic, firebase-firestore.js de la gstatic, precum și scriptul meu compilat script.js în acea ordine. În prezent, am 3 fișiere TypeScript care se compilează într-un singur fișier js și încerc să încarc datele în primul dintre cele trei fișiere.

Fișierul meu index.html importă cele trei scripturi în head aici

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

Apoi fișierul meu tsconfig.json compilează cele trei fișiere folosind aceste opțiuni

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

În cele din urmă, prima linie din temp.ts este unde apare eroarea atunci când fac importurile mele

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

const firebaseConfig = {
//config here
}

firebase.initializeApp(firebaseConfig);

let db = firebase.firestore();

VS Code îmi dă eroarea de sintaxă Nu se poate găsi modulul 'firebase/app' și, prin urmare, nu reușește să compileze. Am încercat mai multe combinații diferite de firebase și app și nu am reușit să import modulul. Este posibil să compilez mai multe fișiere TypeScript într-un singur fișier JavaScript în timp ce folosesc firebase/firestore? Am reușit să obțin datele folosind JavaScript simplu, dar aș prefera să folosesc TypeScript, deoarece restul proiectului meu este scris în acesta!

Răspuns #1

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

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

Răspunsul #2

Inițializează Firebase în aplicația ta și creează un obiect Firebase App:

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;
}

Sau folosește asta:

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