Używanie TypeScriptu w Cloud Functions

Programiści, którzy wolą pisać funkcje w języku TypeScript, mogą korzystać z 2 rodzajów pomocy w Cloud Functions:

  • Twórz i konfiguruj projekty TypeScriptu na potrzeby automatycznej transpilacji podczas inicjowania (firebase init functions).
  • Przetranspiluj istniejące źródło TypeScript do kodu JavaScript podczas wdrażania za pomocą zastawki przed wdrożeniem.

Postępując zgodnie z instrukcjami w tym przewodniku, możesz przenieść istniejący projekt JavaScript do języka TypeScript i kontynuować wdrażanie funkcji za pomocą punktu zaczepienia przed wdrożeniem w celu transpilacji kodu źródłowego. TypeScript ma wiele zalet w przypadku pisania funkcji w porównaniu do vanilla JavaScript:

  • TypeScript obsługuje najnowsze funkcje JavaScript, takie jak asynchroniczne/oczekiwanie, upraszczając zarządzanie obietnicami.
  • Linter Cloud Functions wyróżnia typowe problemy podczas kodowania
  • Bezpieczeństwo typów pomaga uniknąć błędów w środowisku wykonawczym wdrażanych funkcji

Jeśli nie znasz jeszcze języka TypeScript, zapoznaj się z artykułem TypeScript w ciągu 5 minut.

Inicjowanie nowego projektu Cloud Functions za pomocą TypeScript

Uruchom plik firebase init functions w nowym katalogu. Narzędzie to udostępnia opcje tworzenia projektów w języku JavaScript lub TypeScript. Wybierz TypeScript, aby wyświetlić tę strukturę projektu:

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

Po zakończeniu inicjowania usuń znacznik komentarza z przykładu w index.ts i uruchom npm run serve, aby zobaczyć, jak działa funkcja „Hello World”.

Używanie istniejącego projektu TypeScript

Jeśli masz już projekt TypeScript, możesz dodać punkt zaczepienia przed wdrożeniem, aby mieć pewność, że projekt będzie transpilowany przy każdym wdrażaniu kodu w Cloud Functions dla Firebase. Potrzebujesz poprawnie utworzonego pliku tsconfig.json i projektu Firebase oraz wprowadzenia tych zmian w konfiguracji Firebase:

  1. Edytuj package.json, aby dodać skrypt bash do utworzenia projektu TypeScript. Przykład:

     {
       "name": "functions",
       "scripts": {
         "build": "npm run lint && tsc"
       }
     ...
    
  2. Edytuj firebase.json, aby dodać punkt zaczepienia przed wdrożeniem umożliwiający uruchomienie skryptu kompilacji. Przykład:

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

Dzięki tej konfiguracji polecenie firebase deploy --only functions tworzy kod TypeScript i wdraża go jako funkcje.

Migracja istniejącego projektu JavaScript do TypeScript

Jeśli masz istniejący projekt Cloud Functions, który został zainicjowany i utworzony w języku JavaScript, możesz go przenieść do TypeScript. Przed rozpoczęciem zdecydowanie zalecamy utworzenie punktu kontrolnego git lub innej kopii zapasowej.

Aby przeprowadzić migrację istniejącego projektu JavaScript Cloud Functions:

  1. Utwórz punkt kontrolny Git i zapisz kopie istniejących plików źródłowych JavaScript.
  2. W katalogu projektu uruchom firebase init functions i wybierz TypeScript, gdy pojawi się prośba o podanie języka do pisania funkcji.
  3. Gdy pojawi się pytanie, czy zastąpić istniejący plik package.json, wybierz Nie, chyba że nie chcesz zachować istniejącego pliku.
  4. Usuń plik index.ts z katalogu functions/src, zastępując go istniejącym kodem źródłowym.
  5. W pliku tsconfig.json utworzonym podczas inicjowania ustaw opcje kompilatora na to, by zezwolić na język JavaScript: "allowJs": true.
  6. Skopiuj zapisany plik package.json do katalogu functions i edytuj go, aby ustawić w "main" wartość "lib/index.js".
  7. W package.json dodaj też skrypt kompilacji kodu TypeScript podobny do tego:

     {
       "name": "functions",
       "scripts": {
         "build": "npm run lint && tsc"
       }
     ...
    
  8. Dodaj "typescript" jako zależność programisty, uruchamiając polecenie npm install --save-dev typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser.

  9. Dla wszystkich zależności uruchom npm install --save @types/<dependency>.

  10. W razie potrzeby przepisz kod źródłowy z kodu .js do pliku .ts.

Emulowanie funkcji TypeScriptu

Aby przetestować funkcje TypeScript lokalnie, możesz użyć narzędzi do emulacji opisanych w artykule Lokalne uruchamianie funkcji. Ważne jest, aby przed użyciem tych narzędzi skompilować kod. Pamiętaj, aby przed uruchomieniem firebase emulators:start lub firebase functions:shell uruchomić polecenie npm run build w katalogu funkcji. Możesz też uruchomić skrót npm run serve lub npm run shell. Polecenia te uruchamiają kompilację oraz uruchamiają i uruchamiają powłokę funkcji.

Logi funkcji dla projektów TypeScript

Podczas firebase deploy index.ts Twojego projektu jest transpilowany do index.js, co oznacza, że dziennik Cloud Functions zawiera numery wierszy z pliku index.js, a nie z napisanego przez Ciebie kodu. Aby ułatwić znajdowanie odpowiednich ścieżek i numerów wierszy w tabeli index.ts, firebase deploy tworzy functions/lib/index.js.map. Tej mapy źródeł możesz użyć w preferowanym IDE lub za pomocą modułu węzłów.