Korzystanie z TypeScript w Cloud Functions

Programistom, którzy wolą pisać funkcje w języku TypeScript, Cloud Functions udostępnia 2 sposoby obsługi:

  • Tworzenie i konfigurowanie projektów TypeScript w celu automatycznego transpilowania podczas inicjalizacji (firebase init functions).
  • Transpiluj istniejące źródło TypeScript do JavaScriptu podczas wdrażania za pomocą haczyka wstępnego wdrożenia.

Postępując zgodnie z instrukcjami w tym przewodniku, możesz przenieść istniejący projekt JavaScriptu do TypeScriptu i kontynuować wdrażanie funkcji za pomocą przedwdrożeniowego haczyka do transpilacji kodu źródłowego. TypeScript oferuje wiele korzyści w porównaniu z tradycyjnym JavaScriptem podczas tworzenia funkcji:

  • TypeScript obsługuje najnowsze funkcje JavaScriptu, takie jak async/await, upraszczając zarządzanie obietnicami
  • Linter Cloud Functions wskazuje typowe problemy podczas kodowania
  • Bezpieczeństwo typów pomaga unikać błędów w czasie wykonywania wdrożonych funkcji

Jeśli nie znasz jeszcze TypeScript, zapoznaj się z artykułem TypeScript w 5 minut.

Inicjowanie nowego projektu Cloud Functions za pomocą TypeScriptu

Uruchom firebase init functions w nowym katalogu. Narzędzie zawiera opcje budowania projektu za pomocą JavaScriptu lub TypeScriptu. Wybierz TypeScript, aby wyświetlić 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ń znacznik komentarza z przykładu w index.ts i uruchom npm run serve, aby zobaczyć, jak działa funkcja „Hello World”.

Korzystanie z istniejącego projektu TypeScript

Jeśli masz istniejący 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 for Firebase. Potrzebujesz prawidłowo sformatowanego pliku tsconfig.json i projektu Firebase. Musisz wprowadzić w konfiguracji Firebase następujące zmiany:

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

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

  2. Kliknij Edytuj firebase.json, aby dodać element przedwdrożeniowy, który uruchamia 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.

Migracja 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 TypeScript. Przed rozpoczęciem zalecamy utworzenie punktu kontrolnego git lub innego rodzaju kopii zapasowej.

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

  1. Utwórz punkt kontrolny git i zapisz kopie dotychczasowych plików źródłowych JavaScript.
  2. W katalogu projektu uruchom firebase init functions i wybierz TypeScript, gdy pojawi się prośba o wybór języka do pisania funkcji.
  3. Gdy pojawi się pytanie, czy chcesz 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, zastępując go dotychczasowym kodem źródłowym.
  5. W pliku tsconfig.json utworzonym podczas inicjowania ustaw opcje kompilatora tak, aby zezwalały na kod JavaScript: "allowJs": true.
  6. Skopiuj zapisany plik package.json do katalogu functions i zmodyfikuj go tak, aby wartość "main" miała wartość "lib/index.js".

  7. Także w package.json dodaj skrypt kompilacji dla TypeScriptu:

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

  8. Dodaj "typescript" jako zależność programistyczną, 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 rozszerzenia .js na .ts.

Emulowanie funkcji TypeScript

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

Logi funkcji w przypadku projektów TypeScript

Podczas firebase deploy funkcja index.ts Twojego projektu jest transpilowana do index.js, co oznacza, że log Cloud Functions będzie zawierać numery wierszy z pliku index.js, a nie z Twojego kodu. Aby ułatwić Ci znajdowanie odpowiednich ścieżek i numerów wierszy w polu index.ts, firebase deploy tworzy functions/lib/index.js.map. Możesz użyć tej mapy źródeł w ulubionym środowisku IDE lub za pomocą modułu node.