Catch up on everything announced at Firebase Summit, and learn how Firebase can help you accelerate app development and run your app with confidence. Learn More

Użyj TypeScript dla Cloud Functions

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

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ń 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 Firebase plik index.ts Twojego projektu jest index.ts do index.js , co oznacza, że ​​dziennik Cloud Functions będzie generować 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 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 .