Użyj TypeScript dla funkcji w chmurze

Programistom, którzy wolą pisać funkcje w języku TypeScript, Cloud Functions zapewnia dwa rodzaje wsparcia:

  • Twórz i konfiguruj projekty TypeScript do automatycznej transpilacji podczas inicjalizacji ( firebase init functions ).
  • Transpiluj istniejące źródło TypeScriptu na JavaScript w czasie wdrażania za pomocą haka przed wdrożeniem .

Postępując zgodnie z instrukcjami zawartymi w tym przewodniku, możesz migrować istniejący projekt JavaScript do TypeScript i kontynuować wdrażanie funkcji przy użyciu haka przed wdrożeniem w celu transpilacji kodu źródłowego. TypeScript oferuje wiele korzyści w porównaniu z waniliowym JavaScriptem podczas pisania funkcji:

  • TypeScript obsługuje najnowsze funkcje JavaScript, takie jak async/await, upraszczając zarządzanie obietnicami
  • Linter Cloud Functions podkreśla typowe problemy podczas kodowania
  • Bezpieczeństwo typów pomaga uniknąć błędów w czasie wykonywania we wdrożonych funkcjach

Jeśli dopiero zaczynasz przygodę z TypeScriptem, zobacz TypeScript w 5 minut .

Inicjowanie nowego projektu Cloud Functions za pomocą TypeScript

Uruchom firebase init functions w nowym katalogu. Narzędzie daje możliwość zbudowania projektu za pomocą JavaScript lub TypeScript. 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 inicjalizacji odkomentuj próbkę w pliku Index.ts i uruchom npm run serve , aby zobaczyć funkcję „Hello World” w akcji.

Korzystanie z istniejącego projektu TypeScript

Jeśli masz istniejący projekt TypeScript, możesz dodać hak przed wdrożeniem, aby mieć pewność, że projekt będzie transpilowany za każdym razem, gdy wdrażasz kod w Cloud Functions dla Firebase. Będziesz potrzebował poprawnie utworzonego pliku tsconfig.json i projektu Firebase, a także musisz wprowadzić następujące modyfikacje w konfiguracji Firebase:

  1. Edytuj package.json , aby dodać skrypt bash do zbudowania projektu TypeScript. Na przykład:

     {
       "name": "functions",
       "scripts": {
         "build": "npm run lint && tsc"
       }
     ...
    
  2. Edytuj firebase.json , aby dodać hak przed wdrożeniem w celu uruchomienia skryptu kompilacji. Na przykład:

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

W tej konfiguracji polecenie firebase deploy --only functions buduje 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 języku JavaScript, możesz przeprowadzić migrację go do TypeScript. Zdecydowanie zalecamy utworzenie punktu kontrolnego git lub innej kopii zapasowej przed rozpoczęciem.

Aby przeprowadzić migrację istniejącego projektu 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 wybierz TypeScript , gdy pojawi się monit o język do pisania funkcji.
  3. Po wyświetleniu monitu o zastąpienie istniejącego pliku package.json wybierz opcję Nie , chyba że masz pewność, że nie chcesz zachować istniejącego pliku.
  4. Usuń plik index.ts z functions/src , zastępując go istniejącym kodem źródłowym.
  5. W pliku tsconfig.json utworzonym podczas inicjalizacji ustaw opcje kompilatora tak, aby zezwalał na JavaScript: "allowJs": true .
  6. Skopiuj zapisany plik package.json do katalogu functions i edytuj go, ustawiając "main" na "lib/index.js" .
  7. Również w package.json dodaj skrypt kompilacji dla TypeScript, jak poniżej:

     {
       "name": "functions",
       "scripts": {
         "build": "npm run lint && tsc"
       }
     ...
    
  8. Dodaj "typescript" jako zależność programisty, uruchamiając npm install --save-dev typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser .

  9. Dla wszystkich zależności uruchom npm install --save @types/<dependency> .

  10. Przepisz kod źródłowy z .js na .ts według potrzeb.

Emulowanie funkcji TypeScriptu

Aby lokalnie przetestować funkcje TypeScriptu, możesz użyć narzędzi emulacji opisanych w sekcji Uruchamianie funkcji lokalnie . Ważne jest, aby skompilować kod przed użyciem tych narzędzi, więc pamiętaj o uruchomieniu npm run build w katalogu funkcji przed uruchomieniem firebase emulators:start lub firebase functions:shell . Alternatywnie uruchom jako skrót npm run serve lub npm run shell ; te polecenia uruchamiają zarówno kompilację, jak i obsługują/uruchamiają powłokę funkcji.

Dzienniki funkcji dla projektów TypeScript

Podczas firebase deploy index.ts Twojego projektu jest transponowany do index.js , co oznacza, że ​​dziennik Cloud Functions wyświetli numery wierszy z pliku index.js , a nie napisany przez Ciebie kod. Aby ułatwić Ci znalezienie odpowiednich ścieżek i numerów linii w index.ts , firebase deploy tworzy functions/lib/index.js.map . Możesz użyć tej mapy źródłowej w preferowanym IDE lub poprzez moduł węzła .