Catch up on everthing we announced at this year's Firebase Summit. Learn more

TypeScript für Cloud Functions verwenden

Für Entwickler, die es vorziehen, Funktionen in TypeScript zu schreiben, bietet Cloud Functions zwei Arten von Unterstützung:

  • Erstellen und Konfigurieren von Typoskript Projekte für automatische transpilation bei der Initialisierung ( firebase init functions - firebase init functions ).
  • Transpile bestehende Typoskript Quelle JavaScript in deploy Zeit über einen predeploy Haken .

Befolgen Sie die Anweisungen in diesem Handbuch, um ein vorhandenes JavaScript-Projekt zu TypeScript zu migrieren und mit der Bereitstellung von Funktionen fortzufahren, indem Sie einen Pre-Deploy-Hook verwenden, um Ihren Quellcode zu transpilieren. TypeScript bietet beim Schreiben von Funktionen viele Vorteile gegenüber Vanilla-JavaScript:

  • TypeScript unterstützt die neuesten JavaScript-Funktionen wie Async/Await, wodurch das Promise-Management vereinfacht wird
  • Ein Cloud Functions-Linter zeigt häufige Probleme beim Programmieren auf
  • Typsicherheit hilft Ihnen, Laufzeitfehler in bereitgestellten Funktionen zu vermeiden

Wenn Sie Typoskript neu sind, sehen Typoskript in 5 Minuten .

Initialisieren eines neuen Cloud Functions-Projekts mit TypeScript

Run firebase init functions - firebase init functions in einem neuen Verzeichnis. Das Tool bietet Ihnen Optionen zum Erstellen des Projekts mit JavaScript oder TypeScript. Wählen Sie Typoskript zur Ausgabe der folgenden Projektstruktur:

myproject
 +- functions/     # Directory containing all your functions code
      |
      +- package.json  # npm package file describing your Cloud Functions code
      |
      +- tsconfig.json
      |
      +- .eslintrc.js # Optional file if you enabled ESLint
      +- tsconfig.dev.json # Optional file that references .eslintrc.js
      |
      +- src/     # Directory containing TypeScript source
      |   |
      |   +- index.ts  # main source file for your Cloud Functions code
      |
      +- lib/
          |
          +- index.js  # Built/transpiled JavaScript code
          |
          +- index.js.map # Source map for debugging

Sobald die Initialisierung abgeschlossen ist , uncomment die Probe in index.ts und Laufe npm run serve eine „Hallo Welt“ Funktion in Aktion zu sehen.

Verwenden eines vorhandenen TypeScript-Projekts

Wenn Sie ein vorhandenes TypeScript-Projekt haben, können Sie einen Pre-Deploy-Hook hinzufügen, um sicherzustellen, dass Ihr Projekt jedes Mal transpiliert wird, wenn Sie Ihren Code in Cloud Functions for Firebase bereitstellen. Sie werden eine richtig gebildet benötigen tsconfig.json - Datei und ein Projekt Firebase, und Sie werden die folgenden Änderungen an Ihrer Konfiguration vornehmen Firebase müssen:

  1. Bearbeiten package.json einen Bash - Skript um Ihr Typoskript Projekt zu erstellen. Zum Beispiel:

     {
       "name": "functions",
       "scripts": {
         "build": "npm run lint && tsc"
       }
     ...
    
  2. Bearbeiten firebase.json einen predeploy Haken hinzuzufügen , um den Build - Skript auszuführen. Zum Beispiel:

     {
       "functions": {
         "predeploy": "npm --prefix functions run build",
       }
     }
    

Mit dieser Konfiguration wird ein firebase deploy --only functions baut Befehl Ihren Typoskript Code und setzt sie als Funktionen.

Migrieren eines vorhandenen JavaScript-Projekts zu TypeScript

Wenn Sie ein vorhandenes Cloud Functions-Projekt haben, das Sie in JavaScript initialisiert und entwickelt haben, können Sie es zu TypeScript migrieren. Es wird dringend empfohlen, vor dem Start einen Git-Checkpoint oder ein anderes Backup zu erstellen.

So migrieren Sie ein vorhandenes JavaScript Cloud Functions-Projekt:

  1. Erstellen Sie einen Git-Checkpoint und speichern Sie Kopien Ihrer vorhandenen JavaScript-Quelldateien.
  2. Im Projektverzeichnis läuft firebase init functions und wählen Sie TypeScript , wenn für eine Sprache für das Schreiben von Funktionen aufgefordert.
  3. Wenn Sie gefragt werden, ob die bestehende zu überschreiben package.json Datei, wählen Sie Nein , wenn Sie sicher sind Sie nicht wollen , um die vorhandene Datei zu halten.
  4. Löschen index.ts im Verzeichnis functions/src , es mit Ihrer vorhandenen Quellcode zu ersetzen.
  5. In der tsconfig.json Datei bei der Initialisierung erstellt, stellen Sie die Compiler - Optionen JavaScript zu ermöglichen: "allowJs": true .
  6. Kopieren Sie Ihre gespeicherten package.json - Datei in den functions Verzeichnis und bearbeiten es zu setzen "main" auf "lib/index.js" .
  7. Auch in package.json , einen Build - Skript für Typoskript wie die folgenden hinzu:

     {
       "name": "functions",
       "scripts": {
         "build": "npm run lint && tsc"
       }
     ...
    
  8. In "typescript" als Entwickler Abhängigkeit von laufenden npm install --save-dev typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser .

  9. Für alle Abhängigkeiten führen npm install --save @types/<dependency> .

  10. Schreiben Sie den Quellcode wie gewünscht von .js in .ts um.

Emulieren von TypeScript-Funktionen

Um Test Typoskript Funktionen lokal, können Sie die Emulation - Tools beschrieben in verwenden Run Funktionen lokal . Es ist wichtig , den Code zu kompilieren , bevor diese Tools verwenden, so stellen Sie sicher , läuft npm run build in Ihrem Funktion Verzeichnis vor dem Ausführen von firebase emulators:start oder firebase functions:shell . Alternativ laufen npm run serve oder npm run shell als Verknüpfung; Diese Befehle führen sowohl den Build aus als auch dienen/starten die Funktionsshell.

Funktionsprotokolle für TypeScript-Projekte

Während firebase deploy , Ihr Projekt index.ts auf transpiled index.js , was bedeutet , dass die Cloud - Funktionen Ausgangszeilennummern aus dem Protokoll index.js Datei und nicht der Code , den Sie geschrieben haben . Um es einfacher für Sie die entsprechenden Pfade und Zeilennummern in finden index.ts , firebase deploy schafft functions/lib/index.js.map . Sie können diese Quelle Karte in Ihren bevorzugten IDE oder über einen verwenden Knotenmodul .