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:
Edytuj plik
package.json
, aby dodać skrypt bash w celu skompilowania projektu TypeScript. Na przykład:{ "name": "functions", "scripts": { "build": "npm run lint && tsc" } ...
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:
- Utwórz punkt kontrolny git i zapisz kopie istniejących plików źródłowych JavaScript.
- W katalogu projektu uruchom
firebase init functions
i wybierzTypeScript
po wyświetleniu monitu o język do pisania funkcji. - 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. - Usuń
index.ts
z katalogufunctions/src
, zastępując go istniejącym kodem źródłowym. - W pliku
tsconfig.json
utworzonym podczas inicjowania ustaw opcje kompilatora, aby zezwalały na JavaScript:"allowJs": true
. - Skopiuj zapisany plik
package.json
do katalogufunctions
i edytuj go, aby ustawić"main"
na"lib/index.js"
. Również w
package.json
dodaj skrypt kompilacji dla TypeScript, taki jak:{ "name": "functions", "scripts": { "build": "npm run lint && tsc" } ...
Dodaj
"typescript"
jako zależność dev, uruchamiającnpm install --save-dev typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser
.W przypadku wszystkich zależności uruchom
npm install --save @types/<dependency>
.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 .