Korzystanie z TypeScript w Cloud Functions

Dla programistów, którzy wolą pisać funkcje w języku TypeScript, Cloud Functions oferuje 2 rodzaje pomocy:

  • Utwórz i skonfiguruj projekty TypeScript do automatycznej transpilacji podczas inicjowania (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ść projekt JavaScript w TypeScript i kontynuuj wdrażanie funkcji za pomocą punkt zaczepienia przed wdrożeniem do transpilacji kodu źródłowego. TypeScript ma wiele zalet w porównaniu z JavaScriptem waniliowym. podczas pisania funkcji:

  • TypeScript obsługuje najnowsze funkcje JavaScriptu, takie jak asynchroniczny/oczekiwanie, upraszcza zarządzanie obietnicami
  • Linter Cloud Functions wskazuje typowe problemy występujące podczas kodowania
  • Bezpieczeństwo typu pomaga uniknąć błędów czasu działania we wdrożonych funkcjach

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

Inicjowanie nowego projektu Cloud Functions za pomocą TypeScriptu

Uruchom firebase init functions w nowym katalogu. Narzędzie to umożliwia tworzenie za pomocą JavaScriptu lub TypeScriptu. 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 inicjowania usuń znacznik komentarza z próbki w indeksie index.ts i uruchom npm run serve, aby wyświetlić „Hello World” w praktyce.

Korzystanie z istniejącego projektu TypeScript

Jeśli masz istniejący projekt TypeScript, możesz dodać hak przed wdrożeniem do zadbaj o to, aby projekt był transpilowany za każdym razem, gdy wdrażasz w nim kod Cloud Functions for Firebase Potrzebujesz tsconfig.json i projekt Firebase, aby wprowadzić te zmiany w konfiguracji Firebase:

  1. Edytuj package.json, aby dodać skrypt bash umożliwiający utworzenie projektu TypeScript. Przykład:

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

  2. Edytuj firebase.json, aby dodać punkt zaczepienia przed wdrożeniem umożliwiający uruchomienie skryptu kompilacji. Przykład:

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

W przypadku 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 już zainicjowany przez siebie projekt Cloud Functions w języku JavaScript, można go przenieść do TypeScript. Zdecydowanie zalecamy utworzenie punktu kontrolnego git lub innego przed rozpoczęciem tworzenia 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 program firebase init functions i wybierz TypeScript, gdy pojawi się prośba o podanie języka 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ń plik index.ts z katalogu functions/src, zastępując go istniejącym 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 edytuj go, ustawiając "main" na "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ść deweloperską, uruchamiając polecenie 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. Zmodyfikuj kod źródłowy z .js do .ts według potrzeb.

Emulowanie funkcji TypeScript

Aby przetestować lokalnie funkcje TypeScript, możesz użyć opisanych narzędzi do emulacji w sekcji Uruchamianie funkcji lokalnie. Ważne: Przed użyciem tych narzędzi skompiluj swój kod, więc pamiętaj, by uruchomić npm run build w katalogu funkcji, zanim uruchomisz firebase emulators:start lub firebase functions:shell Możesz też uruchomić npm run serve lub npm run shell jako skrót; te polecenia uruchamiają kompilację wyświetlać/uruchamiać powłokę funkcji.

Logi funkcji dla projektów TypeScript

W czasie firebase deploy uprawnienia index.ts Twojego projektu są transpilowane do index.js, co oznacza, że dziennik Cloud Functions będzie wyświetlać numery wierszy index.js, a nie napisany przez Ciebie kod. Aby ułatwić Ci znalezienie odpowiednie ścieżki i numery wierszy w komórce index.ts, firebase deploy tworzy functions/lib/index.js.map. Możesz użyć tego źródła w preferowanym IDE lub za pomocą modułu węzła.