Użyj TypeScript dla Cloud Functions

Dla programistów, którzy wolą pisać funkcje w TypeScript, Cloud Functions oferuje dwa rodzaje wsparcia:

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

Postępując zgodnie z instrukcjami zawartymi w tym przewodniku, możesz przeprowadzić migrację istniejącego projektu JavaScript do TypeScript i kontynuować wdrażanie funkcji przy użyciu przechwytywania przed wdrożeniem w celu przeniesienia kodu źródłowego. TypeScript oferuje wiele korzyści w porównaniu z Vanilla JavaScript podczas pisania funkcji:

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

Jeśli jesteś nowy w TypeScript, zobacz TypeScript w 5 minut .

Inicjowanie nowego projektu Cloud Functions za pomocą języka TypeScript

Uruchom firebase init functions w nowym katalogu. Narzędzie daje opcje budowania 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 przykład w pliku 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ć hak przed wdrożeniem, aby upewnić się, że projekt jest transpilowany za każdym razem, gdy wdrażasz swój kod w Cloud Functions for Firebase. Będziesz potrzebować prawidłowo 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 budowania projektu TypeScript. Na przykład:

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

2. Zmodyfikuj plik 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 komenda 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 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 , gdy pojawi się monit o podanie języka do pisania funkcji.
3. Po wyświetleniu monitu, czy zastąpić istniejący plik package.json , wybierz pozycję nie, chyba że masz pewność, że 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, 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, jak poniżej:

    {
      "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. Dla 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żesz użyć narzędzi emulacji opisanych w Uruchamianie funkcji lokalnie . Ważne jest, aby skompilować swój kod przed użyciem tych narzędzi, więc upewnij się, że uruchomiłeś 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ą kompilację, jak i obsługują/uruchamiają powłokę funkcji.

Dzienniki funkcji dla projektów TypeScript

Podczas firebase deploy index.ts Twojego projektu jest transpilowany do index.js , co oznacza, że ​​dziennik Cloud Functions będzie generować numery wierszy z pliku 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 tworzy functions/lib/index.js.map . Możesz użyć tej mapy źródłowej w preferowanym IDE lub za pośrednictwem modułu węzła .