Użyj TypeScript dla Cloud Functions

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 inicjowania ( firebase init functions Firebase).
  • Transpiluj istniejące źródło TypeScript do JavaScript w czasie wdrażania za pomocą haka wstępnego wdrażania .

Postępując zgodnie z instrukcjami w tym przewodniku, możesz przeprowadzić migrację istniejącego projektu JavaScript do TypeScript i kontynuować wdrażanie funkcji przy użyciu zaczepu predeploy 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 typu pomaga uniknąć błędów w czasie wykonywania we wdrożonych funkcjach

Jeśli dopiero zaczynasz korzystać z TypeScript, zobacz TypeScript w 5 minut .

Inicjowanie nowego projektu Cloud Functions za pomocą TypeScript

Uruchom firebase init functions w nowym katalogu. Narzędzie daje opcje budowania projektu za pomocą JavaScript lub TypeScript. Wybierz TypeScript , aby wyprowadzić 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 usuń komentarz z próbki w index.ts i uruchom npm run serve , aby zobaczyć działanie funkcji „Hello World”.

Korzystanie z istniejącego projektu TypeScript

Jeśli masz istniejący projekt TypeScript, możesz dodać punkt zaczepienia przed wdrożeniem, aby upewnić się, że projekt jest transpilowany za każdym razem, gdy wdrażasz kod w Cloud Functions dla Firebase. Potrzebny będzie prawidłowo utworzony plik tsconfig.json i projekt Firebase, a także wprowadzenie następujących modyfikacji w konfiguracji Firebase:

  1. Edytuj plik package.json , aby dodać skrypt bash w celu skompilowania projektu TypeScript. Na przykład:

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

  2. Edytuj plik firebase.json , aby dodać punkt zaczepienia predeploy w celu uruchomienia skryptu kompilacji. Na przykład:

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

W tej konfiguracji polecenie firebase deploy --only functions tworzy 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 zainicjowałeś i opracowałeś w JavaScript, możesz przenieść go do TypeScript. Zdecydowanie zachęcamy do utworzenia 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 po wyświetleniu monitu o język do pisania funkcji.
  3. Po wyświetleniu monitu, czy zastąpić istniejący plik package.json , wybierz opcję Nie , chyba że masz pewność, że nie chcesz zachować istniejącego pliku.
  4. Usuń 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, aby zezwalały na JavaScript: "allowJs": true .
  6. Skopiuj zapisany plik package.json do katalogu functions i edytuj go, aby ustawić "main" na "lib/index.js" .

  7. Również w package.json dodaj skrypt kompilacji dla TypeScript, taki jak:

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

  8. Dodaj "typescript" jako zależność dev, uruchamiając npm install --save-dev typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser .

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

  10. Przepisz kod źródłowy z .js na .ts zgodnie z potrzebami.

Emulowanie funkcji TypeScript

Aby przetestować funkcje TypeScript lokalnie, można użyć narzędzi emulacji opisanych w temacie Uruchamianie funkcji lokalnie . Ważne jest, aby skompilować kod przed użyciem tych narzędzi, dlatego pamiętaj, aby uruchomić npm run build w katalogu funkcji przed uruchomieniem firebase emulators:start lub firebase functions:shell . Alternatywnie uruchom npm run serve lub npm run shell jako skrót; te polecenia zarówno uruchamiają budowanie, jak i udostępniają/uruchamiają powłokę funkcji.

Dzienniki funkcji dla projektów TypeScript

Podczas firebase deploy Firebase plik index.ts Twojego projektu jest index.ts do index.js , co oznacza, że ​​dziennik Cloud Functions będzie wyświetlał numery wierszy z index.js , a nie z napisanego przez Ciebie kodu. Aby ułatwić znajdowanie odpowiednich ścieżek i numerów wierszy w index.ts , firebase deploy Deployment tworzy functions/lib/index.js.map . Możesz użyć tej mapy źródłowej w preferowanym środowisku IDE lub za pośrednictwem modułu węzła .