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 (firebase init functions) erstellen und konfigurieren.
  • Vorhandene TypeScript-Quellen während der Bereitstellung ü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 mit einem Predeploy-Hook bereitstellen, 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, was die Verwaltung von Promises vereinfacht.
  • Ein Cloud Functions-Linter hebt häufige Probleme beim Programmieren hervor.
  • Typsicherheit hilft Ihnen, Laufzeitfehler in bereitgestellten Funktionen zu vermeiden.

Wenn Sie TypeScript noch nicht kennen, lesen Sie TypeScript in 5 Minuten.

Neues Cloud Functions-Projekt mit TypeScript initialisieren

Führen Sie firebase init functions in einem neuen Verzeichnis aus. Mit dem Tool können Sie das Projekt mit JavaScript oder TypeScript 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

Nach Abschluss der Initialisierung können Sie die Auskommentierung des Beispiels in „index.ts“ aufheben und npm run serve ausführen, 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, damit Ihr Projekt jedes Mal transpiliert wird, wenn Sie Ihren Code in 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-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 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 dem Start einen Git-Prüfpunkt oder eine andere Sicherung zu erstellen.

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

  1. Erstellen Sie einen Git-Prüfpunkt 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 aus, 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 zulässig ist: "allowJs": true.
  6. Kopieren Sie die gespeicherte package.json-Datei in das Verzeichnis functions und bearbeiten Sie sie, um "main" auf "lib/index.js" festzulegen.

  7. Fügen Sie in package.json außerdem ein Build-Script 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 im Verzeichnis Ihrer Funktionen 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.

Funktionslogs für TypeScript-Projekte

Während firebase deploy wird die 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 leichter finden, erstellt firebase deploy functions/lib/index.js.map. Sie können diese Quellzuordnung in Ihrer bevorzugten IDE oder über ein Knotenmodul verwenden.