Verwenden Sie TypeScript für Cloud Functions

Für Entwickler, die Funktionen lieber in TypeScript schreiben möchten, bietet Cloud Functions zwei Arten von Unterstützung:

  • Erstellen und konfigurieren Sie TypeScript-Projekte für die automatische Transpilierung bei der Initialisierung ( firebase init functions ).
  • Transpilieren Sie vorhandene TypeScript-Quellen zum Zeitpunkt der Bereitstellung über einen Predeploy-Hook in JavaScript.

Wenn Sie den Anweisungen in diesem Handbuch folgen, können Sie ein vorhandenes JavaScript-Projekt zu TypeScript migrieren und mit der Bereitstellung von Funktionen fortfahren, indem Sie einen Predeploy-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 und vereinfacht so die Versprechenverwaltung
  • Ein Cloud Functions-Linter hebt häufige Probleme beim Codieren hervor
  • Mithilfe der Typensicherheit können Sie Laufzeitfehler in bereitgestellten Funktionen vermeiden

Wenn Sie neu bei TypeScript sind, sehen Sie sich TypeScript in 5 Minuten an.

Initialisieren eines neuen Cloud Functions-Projekts mit TypeScript

Führen Sie firebase init functions in einem neuen Verzeichnis aus. Das Tool bietet Ihnen Optionen zum Erstellen des Projekts mit JavaScript oder TypeScript. Wählen Sie TypeScript, um die folgende Projektstruktur auszugeben:

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, entkommentieren Sie das Beispiel in index.ts und führen Sie npm run serve aus, um eine „Hello World“-Funktion in Aktion zu sehen.

Verwendung eines vorhandenen TypeScript-Projekts

Wenn Sie über ein bestehendes TypeScript-Projekt verfügen, können Sie einen Predeploy-Hook hinzufügen, um sicherzustellen, dass Ihr Projekt jedes Mal transpiliert wird, wenn Sie Ihren Code in Cloud Functions für Firebase bereitstellen. Sie benötigen eine ordnungsgemäß formatierte tsconfig.json Datei und ein Firebase-Projekt und müssen die folgenden Änderungen an Ihrer Firebase-Konfiguration vornehmen:

  1. Bearbeiten Sie package.json , um ein Bash-Skript zum Erstellen Ihres TypeScript-Projekts hinzuzufügen. Zum Beispiel:

     {
       "name": "functions",
       "scripts": {
         "build": "npm run lint && tsc"
       }
     ...
    
  2. Bearbeiten Sie firebase.json um einen Predeploy-Hook zum Ausführen des Build-Skripts hinzuzufügen. Zum Beispiel:

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

Mit dieser Konfiguration erstellt ein firebase deploy --only functions Befehl Ihren TypeScript-Code und stellt ihn als Funktionen bereit.

Migrieren eines vorhandenen JavaScript-Projekts nach TypeScript

Wenn Sie über ein vorhandenes Cloud Functions-Projekt verfügen, das Sie in JavaScript initialisiert und entwickelt haben, können Sie es nach TypeScript migrieren. Wir empfehlen Ihnen dringend, 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. Führen Sie im Projektverzeichnis firebase init functions aus und wählen Sie TypeScript aus, wenn Sie nach einer Sprache zum Schreiben von Funktionen gefragt werden.
  3. Wenn Sie gefragt werden, ob die vorhandene Datei package.json überschrieben werden soll, wählen Sie „Nein“ , es sei denn, Sie sind sicher, dass Sie die vorhandene Datei nicht behalten möchten.
  4. Löschen Sie index.ts im Verzeichnis functions/src und ersetzen Sie es durch Ihren vorhandenen Quellcode.
  5. Legen Sie in der bei der Initialisierung erstellten Datei tsconfig.json die Compileroptionen so fest, dass JavaScript zugelassen wird: "allowJs": true .
  6. Kopieren Sie Ihre gespeicherte package.json Datei in das functions und bearbeiten Sie sie, um "main" auf "lib/index.js" zu setzen.
  7. Fügen Sie außerdem in package.json ein Build-Skript für TypeScript wie das folgende hinzu:

     {
       "name": "functions",
       "scripts": {
         "build": "npm run lint && tsc"
       }
     ...
    
  8. Fügen Sie "typescript" als Entwicklungsabhängigkeit hinzu, indem npm install --save-dev typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser .

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

  10. Schreiben Sie den Quellcode nach Bedarf von .js in .ts um.

Emulieren von TypeScript-Funktionen

Um TypeScript-Funktionen lokal zu testen, können Sie die unter Funktionen lokal ausführen beschriebenen Emulationstools verwenden. Es ist wichtig, dass Sie Ihren Code kompilieren, bevor Sie diese Tools verwenden. Stellen Sie daher sicher, dass Sie npm run build in Ihrem Funktionsverzeichnis ausführen, bevor Sie firebase emulators:start “ oder firebase functions:shell ausführen. Alternativ können Sie npm run serve oder npm run shell als Verknüpfung ausführen; Mit diesen Befehlen wird sowohl der Build ausgeführt als auch die Funktions-Shell bereitgestellt bzw. gestartet.

Funktionsprotokolle für TypeScript-Projekte

Während firebase deploy wird index.ts Ihres Projekts in index.js transpiliert, was bedeutet, dass das Cloud Functions-Protokoll Zeilennummern aus der Datei index.js und nicht den von Ihnen geschriebenen Code ausgibt. Um Ihnen das Auffinden der entsprechenden Pfade und Zeilennummern in index.ts zu erleichtern, erstellt firebase deploy functions/lib/index.js.map . Sie können diese Quellkarte in Ihrer bevorzugten IDE oder über ein Knotenmodul verwenden.