TypeScript für Cloud Functions verwenden

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

  • TypeScript-Projekte für die automatische Transpilierung bei der Initialisierung erstellen und konfigurieren (firebase init functions).
  • Vorhandene TypeScript-Quellen über einen Predeploy-Hook bei der Bereitstellung in JavaScript transpilieren.

Folgen Sie der Anleitung in diesem Leitfaden, um ein vorhandenes JavaScript-Projekt zu TypeScript zu migrieren und Funktionen mit einem Pre-Deploy-Hook weiter bereitzustellen, 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 die Verwaltung von Versprechen vereinfacht wird
  • Ein Cloud Functions-Linter hebt häufige Probleme beim Programmieren hervor
  • Mithilfe der Typsicherheit lassen sich Laufzeitfehler in bereitgestellten Funktionen vermeiden

Wenn Sie mit TypeScript noch nicht vertraut sind, 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 die Möglichkeit, 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

Entfernen Sie nach Abschluss der Initialisierung den Kommentar aus dem Beispiel in index.ts und führen Sie npm run serve aus, um die „Hello World“-Funktion in Aktion zu sehen.

Vorhandenes TypeScript-Projekt verwenden

Wenn Sie ein vorhandenes TypeScript-Projekt haben, können Sie einen Pre-Deploy-Hook hinzufügen, damit Ihr Projekt jedes Mal transpiliert wird, wenn Sie Ihren Code auf Cloud Functions for Firebase bereitstellen. 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-Script zum Erstellen Ihres TypeScript-Projekts hinzuzufügen. Beispiel:

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

  2. Bearbeiten Sie firebase.json, um einen Pre-Deploy-Hook zum Ausführen des Build-Scripts hinzuzufügen. Beispiel:

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

Bei dieser Konfiguration wird Ihr TypeScript-Code mit dem Befehl firebase deploy --only functions erstellt und als Funktionen bereitgestellt.

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 Ihnen dringend, vor Beginn einen Git-Prüfpunkt oder ein anderes Back-up zu erstellen.

So migrieren Sie ein vorhandenes JavaScript-Cloud Functions-Projekt:

  1. Erstellen Sie einen Git-Checkpunkt 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 für das 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 sind sich 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 Datei tsconfig.json, die bei der Initialisierung erstellt wurde, die Compileroptionen so fest, dass JavaScript zugelassen wird: "allowJs": true.
  6. Kopieren Sie die 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 unter package.json auch ein Build-Script für TypeScript hinzu, z. B. das folgende:

     {
   "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. Überschreiben Sie den Quellcode nach Bedarf von „.js“ in „.ts“.

TypeScript-Funktionen emulieren

Sie können TypeScript-Funktionen lokal mit den Emulatortools testen, die unter Funktionen lokal ausführen beschrieben werden. Sie müssen Ihren Code kompilieren, bevor Sie diese Tools verwenden können. Führen Sie also npm run build im Verzeichnis „functions“ aus, 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 der Build ausgeführt und die Functions-Shell bereitgestellt/gestartet.

Funktionsprotokolle für TypeScript-Projekte

Während der firebase deploy-Phase wird die index.ts Ihres Projekts in index.js transpiliert. Das bedeutet, dass im Cloud Functions-Protokoll 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 leichter finden, erstellt firebase deploy functions/lib/index.js.map. Sie können diese Quellkarte in Ihrer bevorzugten IDE oder über ein Knotenmodul verwenden.