Korzystanie z TypeScript w Cloud Functions

Deweloperzy, którzy wolą pisać funkcje w TypeScript, Cloud Functions mogą korzystać z 2 rodzajów pomocy:

  • Tworzenie i konfigurowanie projektów TypeScript na potrzeby automatycznej transpilacji podczas inicjowania (firebase init functions).
  • Transpilacja istniejącego kodu źródłowego TypeScript do JavaScriptu podczas wdrażania za pomocą haka predeploy.

Postępując zgodnie z instrukcjami w tym przewodniku, możesz przenieść istniejący projekt JavaScript do TypeScript i nadal 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.
  • Linter Cloud Functions 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 w 5 minut.

Inicjowanie nowego projektu za pomocą TypeScriptCloud Functions

W nowym katalogu uruchom firebase init functions. Narzędzie umożliwia utworzenie 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 usuń komentarz z przykładu w pliku index.ts i uruchom 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ć hak predeploy, aby mieć pewność, że projekt będzie transpilowany za każdym razem, gdy wdrożysz kod w Cloud Functions for Firebase. Będziesz potrzebować prawidłowo sformatowanego pliku tsconfig.json i projektu w Firebase. Musisz też wprowadzić te zmiany w konfiguracji Firebase:

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

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

  2. Edytuj plik firebase.json, aby dodać hak predeploy do uruchamiania 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.

Przenoszenie istniejącego projektu JavaScript do TypeScript

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

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 firebase init functions i gdy pojawi się prośba o podanie 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 masz pewność, że nie chcesz zachować istniejącego pliku.
  4. Usuń plik 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, aby zezwolić 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 pliku package.json dodaj też skrypt kompilacji dla TypeScript, taki jak ten:

     {
   "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 npm install --save @types/<dependency>.

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

Emulowanie funkcji TypeScript

Aby przetestować funkcje TypeScript lokalnie, możesz użyć narzędzi do emulacji opisanych w Uruchamianie funkcji lokalnie. Przed użyciem tych narzędzi musisz skompilować kod, więc przed uruchomieniem firebase emulators:start lub firebase functions:shell uruchom 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 uruchamiają powłokę funkcji.

Logi funkcji w projektach TypeScript

Podczas firebase deploy plik index.ts projektu jest transpilowany do index.js, co oznacza, że logi Cloud Functions będą 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 pliku index.ts, polecenie firebase deploy tworzy plik functions/lib/index.js.map. Możesz użyć tej mapy źródłowej w preferowanym IDE lub za pomocą modułu Node.