Korzystanie z TypeScript w Cloud Functions

Deweloperom, którzy wolą pisać funkcje w TypeScript, Cloud Functions zapewnia 2 rodzaje wsparcia:

  • tworzyć i konfigurować projekty TypeScript na potrzeby automatycznej transpilacji podczas inicjowania (firebase init functions);
  • Transpiluj istniejący kod źródłowy TypeScript do JavaScriptu w momencie wdrażania za pomocą punktu zaczepienia przed wdrożeniem.

Postępując zgodnie z instrukcjami podanymi w tym przewodniku, możesz przenieść istniejący projekt JavaScript do TypeScript i nadal wdrażać funkcje za pomocą punktu zaczepienia przed wdrożeniem, aby transpilować kod źródłowy. TypeScript oferuje wiele korzyści w porównaniu z czystym JavaScriptem podczas pisania funkcji:

  • TypeScript obsługuje najnowsze funkcje JavaScriptu, takie jak async/await, co upraszcza zarządzanie obietnicami.
  • Cloud Functions linter wyróżnia typowe problemy podczas kodowania
  • Zabezpieczenia wpisywania pomagają uniknąć błędów środowiska wykonawczego we wdrożonych funkcjach.

Jeśli dopiero zaczynasz korzystać z TypeScript, zapoznaj się z artykułem TypeScript in 5 minutes (TypeScript w 5 minut).

Inicjowanie nowego projektu Cloud Functions z TypeScript

Uruchom firebase init functions w nowym katalogu. Narzędzie umożliwia utworzenie projektu w języku JavaScript lub TypeScript. Wybierz TypeScript, aby wygenerować 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ń komentarz z przykładowego kodu w pliku index.ts i uruchom polecenie 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 za każdym razem, gdy wdrożysz kod w Cloud Functions for Firebase. Potrzebujesz prawidłowo sformatowanego pliku tsconfig.json i projektu w Firebase. Musisz też wprowadzić te zmiany w konfiguracji Firebase:

  1. Zmodyfikuj plik package.json, aby dodać skrypt bash do kompilacji projektu TypeScript. Przykład:

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

  2. Zmodyfikuj plik firebase.json, aby dodać punkt zaczepienia przed wdrożeniem, który uruchomi skrypt kompilacji. Przykład:

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

Przy tej konfiguracji polecenie firebase deploy --only functions kompiluje kod TypeScript i wdraża go jako funkcje.

Migracja istniejącego projektu JavaScript do TypeScript

Jeśli masz już projekt Cloud Functions, który został zainicjowany i opracowany w języku JavaScript, możesz go przenieść do TypeScript. Zanim zaczniesz, zdecydowanie zalecamy utworzenie punktu kontrolnego git lub innej kopii zapasowej.

Aby przenieść istniejący projekt JavaScript Cloud Functions:

  1. Utwórz punkt kontrolny git i zapisz kopie istniejących plików źródłowych JavaScriptu.
  2. W katalogu projektu uruchom firebase init functions i wybierz TypeScript, gdy pojawi się prośba o wybranie języka do pisania funkcji.
  3. Gdy pojawi się pytanie, czy zastąpić istniejący plik package.json, wybierz Nie, chyba że masz pewność, że nie chcesz zachować istniejącego pliku.
  4. Usuń index.ts w katalogu functions/src i zastąp go istniejącym kodem źródłowym.
  5. W pliku tsconfig.json utworzonym podczas inicjowania ustaw opcje kompilatora tak, aby zezwalał na JavaScript: "allowJs": true.
  6. Skopiuj zapisany plik package.json do katalogu functions i edytuj go, aby ustawić "main" na "lib/index.js".

  7. W pliku package.json dodaj też skrypt kompilacji dla TypeScript, na przykład:

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

  8. Dodaj "typescript" jako zależność deweloperską, uruchamiając npm install --save-dev typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser.

  9. Aby wyświetlić wszystkie zależności, uruchom polecenie npm install --save @types/<dependency>.

  10. Zmień kod źródłowy z .js na .ts zgodnie z potrzebami.

Emulowanie funkcji TypeScript

Aby przetestować funkcje TypeScript lokalnie, możesz użyć narzędzi do emulacji opisanych w artykule Uruchamianie funkcji lokalnie. Przed użyciem tych narzędzi należy skompilować kod, więc przed uruchomieniem polecenia firebase emulators:start lub firebase functions:shell uruchom polecenie npm run build w katalogu funkcji. Możesz też uruchomić npm run serve lub npm run shell jako skrót. Oba te polecenia uruchamiają kompilację i obsługują/uruchamiają powłokę funkcji.

Logi funkcji w projektach TypeScript

Podczas firebase deploy index.ts Twojego projektu jest transpilowany do index.js, co oznacza, że log Cloud Functions będzie wyświetlać numery wierszy z pliku index.js, a nie z napisanego przez Ciebie kodu. Aby ułatwić Ci znalezienie odpowiednich ścieżek i numerów wierszy w index.ts, firebase deploy tworzy functions/lib/index.js.map. Możesz użyć tej mapy źródła w preferowanym środowisku IDE lub za pomocą modułu węzła.