TypeScript für Cloud Functions verwenden

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

  • TypeScript-Projekte für die automatische Transpilierung bei der Initialisierung erstellen und konfigurieren (firebase init functions)
  • Transpilieren Sie die vorhandene TypeScript-Quelle bei der Bereitstellung mithilfe eines Predeploy-Hooks in JavaScript.

Anhand der Anleitung in diesem Leitfaden können Sie ein vorhandenes JavaScript-Projekt zu TypeScript migrieren und Funktionen mit einem Pre-Deploy-Hook weiter bereitstellen, um Ihren Quellcode zu transpilieren. TypeScript bietet viele Vorteile gegenüber einfachem JavaScript. beim Schreiben von Funktionen:

  • TypeScript unterstützt die neuesten JavaScript-Funktionen wie „async“ und „await“, was die Verwaltung von Versprechen vereinfacht.
  • Ein Cloud Functions-Linter hebt häufige Probleme beim Programmieren hervor
  • Die Typsicherheit hilft Ihnen, Laufzeitfehler in bereitgestellten Funktionen zu vermeiden

Wenn Sie TypeScript noch nicht kennen, sollten Sie sich TypeScript in 5 minutes ansehen.

Neues Cloud Functions-Projekt mit TypeScript initialisieren

Führen Sie firebase init functions in einem neuen Verzeichnis aus. Das Tool bietet Ihnen Optionen, das Projekt mit JavaScript oder TypeScript. Wählen Sie TypeScript aus, um die folgende Projektstruktur erstellen:

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, heben Sie die Kommentarzeichen des Beispiels in "index.ts" auf und führen Sie npm run serve, um „Hallo Welt“ anzusehen in Aktion sehen.

Vorhandenes TypeScript-Projekt verwenden

Wenn Sie bereits ein TypeScript-Projekt haben, können Sie dass Ihr Projekt jedes Mal transpiliert wird, wenn Sie Ihren Code auf Cloud Functions for Firebase Sie benötigen eine tsconfig.json-Datei und ein Firebase-Projekt erstellt haben. um die folgenden Änderungen an Ihrer Firebase-Konfiguration vorzunehmen:

  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-Skripts hinzuzufügen. Beispiel:

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

Bei dieser Konfiguration führt ein firebase deploy --only functions-Befehl erstellt 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 initialisiert haben und in JavaScript entwickelt wurde, können Sie TypeScript verwenden. Es wird dringend empfohlen, einen Git-Prüfpunkt oder einen anderen Sicherung sichern.

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

  1. Erstellen Sie einen Git-Prüfpunkt und speichern Sie Kopien der 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 es durch Ihren vorhandenen Quellcode.
  5. Lege in der bei der Initialisierung erstellten Datei tsconfig.json die Compileroptionen fest, um JavaScript zuzulassen: "allowJs": true.
  6. Kopieren Sie die gespeicherte Datei package.json in das Verzeichnis functions und setzen Sie dort "main" auf "lib/index.js".

  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 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

Um TypeScript-Funktionen lokal zu testen, können Sie die Emulationstools verwenden, die unter Funktionen lokal ausführen. Es ist wichtig, Kompilieren Sie Ihren Code, bevor Sie diese Tools verwenden. Führen Sie daher npm run build aus. im Funktionsverzeichnis, bevor Sie firebase emulators:start ausführen oder firebase functions:shell Alternativ können Sie npm run serve ausführen oder npm run shell als Kurzbefehl: führen diese Befehle den Build aus und Funktions-Shell bereitstellen/starten

Funktionsprotokolle für TypeScript-Projekte

Während des firebase deploy wird der index.ts Ihres Projekts in index.js transpiliert. Das Cloud Functions-Log gibt also die Zeilennummern index.js-Datei und nicht den von Ihnen geschriebenen Code. Damit Sie die relevanten Informationen entsprechende Pfade und Zeilennummern in index.ts, firebase deploy erstellt functions/lib/index.js.map. Sie können diese Quellkarte in Ihrer bevorzugten IDE oder über ein Knotenmodul verwenden.