Korzystanie z TypeScript w Cloud Functions

Deweloperzy, którzy wolą pisać funkcje w języku TypeScript, mogą skorzystać z tych 2 rodzajów pomocy: Cloud Functions

  • Tworzenie i konfigurowanie projektów TypeScript w celu automatycznego transpilowania podczas inicjalizacji (firebase init functions).
  • Przetłumacz istniejący kod źródłowy TypeScript na JavaScript w momencie wdrożenia za pomocą haka przed wdrożeniem.

Postępując zgodnie z instrukcjami w tym przewodniku, możesz przenieść istniejący projekt JavaScriptu do TypeScriptu i nadal wdrażać funkcje za pomocą przedwdrożeniowego haczyka, aby przetłumaczyć kod źródłowy. TypeScript oferuje wiele korzyści w porównaniu z tradycyjnym JavaScriptem podczas tworzenia funkcji:

  • TypeScript obsługuje najnowsze funkcje JavaScriptu, takie jak async/await, co upraszcza zarządzanie obietnicami
  • Linter Cloud Functions podkreśla 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ą TypeScript

Uruchom firebase init functions w nowym katalogu. Narzędzia te umożliwiają tworzenie projektu za pomocą języka 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 inicjalizacji usuń komentarze w pliku index.ts i uruchom go,npm run serve aby zobaczyć, jak działa funkcja „Hello World”.

Korzystanie z istniejącego projektu TypeScript

Jeśli masz już projekt TypeScript, możesz dodać do niego haczyk przed wdrożeniem, aby za każdym razem, gdy wdrażasz kod do Cloud Functions for Firebase, był on najpierw kompilowany. Potrzebujesz prawidłowo sformatowanego pliku tsconfig.json i projektu Firebase. Musisz też wprowadzić w konfiguracji Firebase te zmiany:

  1. Kliknij Edytuj package.json, aby dodać skrypt bash do kompilowania 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 JavaScriptu 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 na pewno 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 inicjalizacji ustaw opcje kompilatora, aby zezwolić na 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. W tym samym pliku package.json dodaj skrypt kompilacji TypeScript, który wygląda tak:

     {
   "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. Aby sprawdzić wszystkie zależności, uruchom 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 kompilowana na index.js, co oznacza, że dziennik funkcji w usłudze Cloud Functions będzie zawierać numery wierszy z pliku index.js, a nie z Twojego kodu. Aby ułatwić znajdowanie odpowiednich ścieżek i numerów linii w pliku index.ts, firebase deploy tworzy plik functions/lib/index.js.map. Możesz użyć tej mapy źródeł w ulubionym środowisku IDE lub za pomocą modułu node.