Korzystanie z TypeScript w Cloud Functions

Deweloperzy, którzy wolą pisać funkcje w języku TypeScript, mogą skorzystać z tych 2 typów obsługi: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ą haku 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 do transpilacji kodu źródłowego. TypeScript oferuje wiele korzyści w porównaniu z tradycyjnym JavaScriptem podczas pisania funkcji:

  • TypeScript obsługuje najnowsze funkcje JavaScriptu, takie jak async/await, upraszczając zarządzanie obietnicami
  • Podczas pisania kodu narzędzie Cloud Functions linter podświetla typowe problemy
  • Bezpieczeństwo typów pomaga unikać błędów w czasie wykonywania wdrożonych funkcji

Jeśli nie znasz języka TypeScript, przeczytaj artykuł TypeScript w 5 minut.

Inicjowanie nowego projektu Cloud Functions za pomocą TypeScript

Uruchom firebase init functions w nowym katalogu. Narzędzia te umożliwiają kompilowanie projektu 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 inicjalizacji odkomentuj przykład w pliku index.ts i uruchom go, 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ć 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 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 na 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 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 sekcji package.json dodaj skrypt kompilacji TypeScript, np. taki:

     {
       "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 artykule 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 chmurze 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, funkcja 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.