Pour les développeurs qui préfèrent écrire des fonctions dans TypeScript, Cloud Functions propose deux types de support:
- Créez et configurez des projets TypeScript pour la transpilation automatique à l'initialisation (
firebase init functions
initialisation defirebase init functions
). - Transpilez la source TypeScript existante en JavaScript au moment du déploiement via un hook de prédéploiement .
En suivant les instructions de ce guide, vous pouvez migrer un projet JavaScript existant vers TypeScript et poursuivre le déploiement de fonctions à l'aide d'un hook de prédéploiement pour transpiler votre code source. TypeScript offre de nombreux avantages par rapport au JavaScript vanille lors de l'écriture de fonctions:
- TypeScript prend en charge les dernières fonctionnalités JavaScript telles que async / await, simplifiant la gestion des promesses
- Un linter Cloud Functions met en évidence les problèmes courants pendant que vous codez
- La sécurité de type vous aide à éviter les erreurs d'exécution dans les fonctions déployées
Si vous débutez avec TypeScript, consultez TypeScript en 5 minutes .
Initialiser un nouveau projet Cloud Functions avec TypeScript
Exécutez les firebase init functions
dans un nouveau répertoire. L'outil vous propose des options pour créer le projet avec JavaScript ou TypeScript. Choisissez TypeScript pour générer la structure de projet suivante:
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
Une fois l'initialisation terminée, décommentez l'exemple dans index.ts et exécutez npm run serve
pour voir une fonction "Hello World" en action.
Utilisation d'un projet TypeScript existant
Si vous disposez d'un projet TypeScript existant, vous pouvez ajouter un hook de prédéploiement pour vous assurer que votre projet est transpilé chaque fois que vous déployez votre code sur Cloud Functions pour Firebase. Vous aurez besoin d'un fichier tsconfig.json
correctement formé et d'un projet Firebase, et vous devrez apporter les modifications suivantes à votre configuration Firebase:
Modifiez
package.json
pour ajouter un script bash afin de créer votre projet TypeScript. Par exemple:{ "name": "functions", "scripts": { "build": "npm run lint && tsc" } ...
Modifiez
firebase.json
pour ajouter un hook de prédéploiement pour exécuter le script de génération. Par exemple:{ "functions": { "predeploy": "npm --prefix functions run build", } }
Avec cette configuration, une commande firebase deploy --only functions
construit votre code TypeScript et le déploie en tant que fonctions.
Migration d'un projet JavaScript existant vers TypeScript
Si vous disposez d'un projet Cloud Functions que vous avez initialisé et développé en JavaScript, vous pouvez le migrer vers TypeScript. Vous êtes fortement encouragé à créer un point de contrôle git ou une autre sauvegarde avant de commencer.
Pour migrer un projet JavaScript Cloud Functions existant:
- Créez un point de contrôle git et enregistrez des copies de vos fichiers source JavaScript existants.
- Dans le répertoire du projet, exécutez les
firebase init functions
et sélectionnezTypeScript
lorsque vousfirebase init functions
àfirebase init functions
un langage pour écrire des fonctions. - Lorsque vous êtes invité à remplacer le fichier
package.json
existant, sélectionnez Non, sauf si vous êtes sûr de ne pas vouloir conserver le fichier existant. - Supprimez
index.ts
dans le répertoirefunctions/src
, en le remplaçant par votre code source existant. - Dans le fichier
tsconfig.json
créé lors de l'initialisation, définissez les options du compilateur pour autoriser JavaScript:"allowJs": "true"
. - Copiez votre fichier
package.json
enregistré dans le répertoirefunctions
et modifiez-le pour définir"main"
sur"lib/index.js"
. Également dans
package.json
, ajoutez un script de construction pour TypeScript comme suit:{ "name": "functions", "scripts": { "build": "npm run lint && tsc" } ...
Ajoutez
"typescript"
comme dépendance de développement en exécutantnpm install --save-dev typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser
.Pour toutes les dépendances, exécutez
npm install --save @types/<dependency>
.Réécrivez le code source de .js vers .ts comme vous le souhaitez.
Émulation des fonctions TypeScript
Pour tester les fonctions TypeScript localement, vous pouvez utiliser les outils d'émulation décrits dans Exécuter les fonctions localement . Il est important de compiler votre code avant d'utiliser ces outils, alors assurez-vous d'exécuter npm run build
dans votre répertoire de fonctions avant d'exécuter des firebase emulators:start
ou firebase functions:shell
. Vous pouvez également exécuter npm run serve
ou npm run shell
comme raccourci; ces commandes exécutent à la fois la construction et servent / démarrent le shell des fonctions.
Journaux des fonctions pour les projets TypeScript
Lors firebase deploy
, l' index.ts
votre projet est transpilé en index.js
, ce qui signifie que le journal Cloud Functions génère les numéros de ligne du fichier index.js
et non du code que vous avez écrit. Pour vous permettre de trouver plus facilement les chemins et numéros de ligne correspondants dans index.ts
, firebase deploy
crée les functions/lib/index.js.map
. Vous pouvez utiliser cette carte source dans votre IDE préféré ou via un module de nœud .