TypeScript für Cloud Functions verwenden

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

  • TypeScript-Projekte für die automatische Transpilierung bei der Initialisierung erstellen und konfigurieren (firebase init functions)
  • Vorhandenen TypeScript-Quellcode zur Bereitstellungszeit über einen Predeploy-Hook in JavaScript transpilieren

Wenn Sie der Anleitung in diesem Leitfaden folgen, können Sie ein vorhandenes JavaScript-Projekt zu TypeScript migrieren und weiterhin Funktionen bereitstellen. Dabei wird Ihr Quellcode über einen Predeploy-Hook transpiliert. TypeScript bietet viele Vorteile gegenüber reinem JavaScript wenn Sie Funktionen schreiben:

  • TypeScript unterstützt die neuesten JavaScript-Funktionen wie „async/await“, was die Promise-Verwaltung vereinfacht.
  • Ein Cloud Functions Linter hebt häufige Probleme hervor, während Sie programmieren.
  • Typsicherheit hilft Ihnen, Laufzeitfehler in bereitgestellten Funktionen zu vermeiden.

Wenn Sie noch keine Erfahrung mit TypeScript haben, lesen Sie den Artikel TypeScript in 5 Minuten.

Neues Cloud Functions Projekt mit TypeScript initialisieren

Führen Sie firebase init functions in einem neuen Verzeichnis aus. Das Tool bietet Ihnen Optionen, um das Projekt mit JavaScript oder TypeScript zu erstellen. Wählen Sie TypeScript aus, 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, entfernen Sie die Kommentare aus dem Beispiel in „index.ts“ und führen Sie npm run serve aus, um eine „Hello World“-Funktion in Aktion zu sehen.

Vorhandenes TypeScript-Projekt verwenden

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

  1. Bearbeiten Sie package.json, um ein Bash-Skript zum Erstellen Ihres TypeScript-Projekts hinzuzufügen. 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. Beispiel:

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

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

Vorhandenes JavaScript-Projekt zu TypeScript migrieren

Wenn Sie ein vorhandenes Cloud Functions Projekt haben, das Sie in JavaScript initialisiert und entwickelt haben, können Sie es zu TypeScript migrieren. Wir empfehlen dringend, vor Beginn einen Git-Checkpoint oder eine andere Sicherung 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 package.json-Datei überschrieben werden soll, wählen Sie Nein aus, es sei denn, Sie möchten die vorhandene Datei nicht behalten.
  4. Löschen Sie index.ts im Verzeichnis functions/src und ersetzen Sie sie durch Ihren vorhandenen Quellcode.
  5. Legen Sie in der bei der Initialisierung erstellten Datei tsconfig.json die Compileroptionen so fest, dass JavaScript zulässig ist: "allowJs": true.
  6. Kopieren Sie Ihre gespeicherte package.json-Datei in das Verzeichnis functions und bearbeiten Sie sie so, dass "main" auf "lib/index.js" festgelegt ist.

  7. Fügen Sie in package.json außerdem ein Build-Skript für TypeScript hinzu, z. B.:

     {
   "name": "functions",
   "scripts": {
     "build": "npm run lint && tsc"
   }
 ...

  8. Fügen Sie "typescript" als Entwicklungsabhängigkeit hinzu, indem Sie npm install --save-dev typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser ausführen.

  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.

TypeScript-Funktionen emulieren

Wenn Sie TypeScript-Funktionen lokal testen möchten, 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. Führen Sie daher npm run build in Ihrem Funktionenverzeichnis aus, bevor Sie firebase emulators:start oder firebase functions:shell ausführen. Alternativ können Sie npm run serve oder npm run shell als Abkürzung ausführen. Mit diesen Befehlen wird der Build ausgeführt und die Funktions-Shell bereitgestellt bzw. gestartet.

Funktionslogs für TypeScript-Projekte

Während firebase deploy wird index.ts Ihres Projekts in index.js transpiliert. Das bedeutet, dass im Cloud Functions-Log Zeilennummern aus der Datei index.js und nicht aus dem von Ihnen geschriebenen Code ausgegeben werden. Damit Sie die entsprechenden Pfade und Zeilennummern in index.ts, firebase deploy leichter finden, erstellt functions/lib/index.js.map. Sie können diese Quell zuordnung in Ihrer bevorzugten IDE oder über ein Node-Modul verwenden.