Korzystanie z TypeScript w Cloud Functions

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

  • Tworzenie i konfigurowanie projektów TypeScript na potrzeby automatycznej transpilacji podczas inicjowania (firebase init functions).
  • Transpiluj istniejący kod źródłowy TypeScript na JavaScript w czasie wdrażania za pomocą haczyka predeploy.

Postępując zgodnie z instrukcjami w tym przewodniku, możesz przenieść istniejący projekt w JavaScript na TypeScript i dalej wdrażać funkcje za pomocą haka predeploy, aby transpilować kod źródłowy. TypeScript ma wiele korzyści 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, zapoznaj się z artykułem 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 npm run serve, aby zobaczyć działanie funkcji „Hello World”.

Używanie istniejącego projektu TypeScript

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

  1. Kliknij 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 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 do TypeScript

Jeśli masz istniejący projekt Cloud Functions, który został 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 Cloud Functions JavaScript:

  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ń plik index.ts z katalogu functions/src i zastąp go istniejącym 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 udostępniają/uruchamiają 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 dziennik Cloud Functions będzie zawierać 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.