Korzystanie z TypeScript w Cloud Functions

Deweloperom, którzy wolą pisać funkcje w TypeScript,Cloud Functions udostępnia 2 rodzaje pomocy:

  • Tworzenie i konfigurowanie projektów TypeScript na potrzeby automatycznej transpilacji podczas inicjowania (firebase init functions).
  • Przekompiluj istniejące źródło TypeScriptu do JavaScriptu w czasie wdrażania za pomocą haczyka predeploy.

Postępując zgodnie z instrukcjami w tym przewodniku, możesz przenieść istniejący projekt JavaScript do TypeScriptu i nadal wdrażać funkcje za pomocą haka przed wdrożeniem, aby transpilować kod źródłowy. TypeScript ma wiele zalet w porównaniu ze zwykłym JavaScriptem podczas pisania funkcji:

  • TypeScript obsługuje najnowsze funkcje JavaScriptu, takie jak async/await, co upraszcza zarządzanie obietnicami.
  • Cloud FunctionsLinter wyróżnia typowe problemy podczas pisania kodu.
  • Bezpieczeństwo typów pomaga uniknąć błędów środowiska wykonawczego w wdrożonych funkcjach.

Jeśli dopiero zaczynasz korzystać z TypeScript, przeczytaj artykuł TypeScript w 5 minut.

Inicjowanie nowego projektu Cloud Functions w TypeScript

Uruchom firebase init functions w nowym katalogu. Narzędzie umożliwia tworzenie projektu w JavaScript lub TypeScript. Wybierz TypeScript, aby uzyskać następującą 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 odkomentuj próbkę w pliku index.ts i uruchom polecenie npm run serve, aby zobaczyć działanie funkcji „Hello World”.

Korzystanie z istniejącego projektu TypeScript

Jeśli masz już projekt TypeScript, możesz dodać do niego hooka predeploy, aby mieć pewność, że projekt jest transpilowany za każdym razem, gdy wdrażasz kod w Cloud Functions for Firebase. Musisz mieć prawidłowo sformatowany plik tsconfig.json i projekt Firebase oraz wprowadzić w konfiguracji Firebase te zmiany:

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

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

  2. Edytuj firebase.json, aby dodać wywołanie wstępne przed wdrożeniem, które uruchomi skrypt kompilacji. Przykład:

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

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

Migrowanie istniejącego projektu JavaScript na TypeScript

Jeśli masz istniejący Cloud Functions projekt zainicjowany i opracowany w JavaScript, możesz go przenieść do TypeScriptu. 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 JavaScript.
  2. W katalogu projektu uruchom polecenie firebase init functions i gdy pojawi się prośba o wybranie języka do pisania funkcji, wybierz TypeScript.
  3. Gdy pojawi się pytanie, czy chcesz zastąpić istniejący plik package.json, kliknij Nie, chyba że nie chcesz zachować istniejącego pliku.
  4. Usuń index.ts w katalogu functions/src i zastąp go dotychczasowym kodem źródłowym.
  5. W pliku tsconfig.json utworzonym podczas inicjowania ustaw opcje kompilatora, aby zezwalać na JavaScript: "allowJs": true.
  6. Skopiuj zapisany plik package.json do katalogu functions i edytuj go, aby ustawić wartość "main" na "lib/index.js".

  7. W package.json dodaj też skrypt kompilacji dla TypeScriptu, np. taki:

     {
   "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. W przypadku wszystkich zależności uruchom polecenie npm install --save @types/<dependency>.

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

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 musisz 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ż użyć skrótu npm run serve lub npm run shell. Oba te polecenia uruchamiają kompilację i serwer/powłokę funkcji.

Logi funkcji w projektach TypeScript

Podczas firebase deploy kod index.ts w Twoim projekcie jest transpilowany do index.js, co oznacza, że w logu Cloud Functions będą wyświetlane numery wierszy z pliku index.js, a nie z napisanego przez Ciebie kodu. Aby ułatwić Ci znajdowanie odpowiednich ścieżek i numerów wierszy w index.ts, usługa 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.