Utiliser TypeScript pour Cloud Functions

Pour les développeurs qui préfèrent écrire des fonctions en TypeScript, Cloud Functions propose deux types d'assistance :

  • Créez et configurez des projets TypeScript pour la transpilation automatique lors de l'initialisation (firebase 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 continuer à déployer des fonctions à l'aide d'un hook de pré-déploiement pour transcompiler votre code source. TypeScript offre de nombreux avantages par rapport à JavaScript pur lors de l'écriture de fonctions :

  • TypeScript est compatible avec les dernières fonctionnalités JavaScript, telles que async/await, ce qui simplifie la gestion des promesses.
  • Un Cloud Functions linter met en évidence les problèmes courants pendant que vous codez.
  • La sécurité des types vous aide à éviter les erreurs d'exécution dans les fonctions déployées.

Si vous ne connaissez pas TypeScript, consultez la section TypeScript en 5 minutes.

Initialiser un nouveau Cloud Functions projet avec TypeScript

Exécutez firebase init functions dans un nouveau répertoire. L'outil vous permet de 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, annulez la mise en commentaire de l'exemple dans index.ts et exécutez npm run serve pour voir une fonction "Hello World" en action.

Utiliser 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 transcompilé chaque fois que vous déployez votre code dans Cloud Functions for Firebase. Vous aurez besoin d'un fichier tsconfig.json correctement formé et d'un projet Firebase. Vous devrez également apporter les modifications suivantes à votre configuration Firebase :

  1. Modifiez package.json pour ajouter un script bash afin de créer votre projet TypeScript. Exemple :

     {
       "name": "functions",
       "scripts": {
         "build": "npm run lint && tsc"
       }
     ...
    
  2. Modifiez firebase.json pour ajouter un hook de pré-déploiement afin d'exécuter le script de compilation. Exemple :

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

Avec cette configuration, une commande firebase deploy --only functions compile votre code TypeScript et le déploie en tant que fonctions.

Migrer un projet JavaScript existant vers TypeScript

Si vous disposez d'un projet Cloud Functions existant que vous avez initialisé et développé en JavaScript, vous pouvez le migrer vers TypeScript. Nous vous recommandons vivement de créer un point de contrôle Git ou une autre sauvegarde avant de commencer.

Pour migrer un projet Cloud Functions JavaScript existant :

  1. Créez un point de contrôle Git et enregistrez des copies de vos fichiers sources JavaScript existants.
  2. Dans le répertoire du projet, exécutez firebase init functions et sélectionnez TypeScript lorsque vous êtes invité à choisir un langage pour écrire des fonctions.
  3. 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.
  4. Supprimez index.ts dans le répertoire functions/src et remplacez-le par votre code source existant.
  5. Dans le fichier tsconfig.json créé lors de l'initialisation, définissez les options du compilateur pour autoriser JavaScript : "allowJs": true.
  6. Copiez le fichier package.json enregistré dans le répertoire functions et modifiez-le pour définir "main" sur "lib/index.js".
  7. Toujours dans package.json, ajoutez un script de compilation pour TypeScript comme suit :

     {
       "name": "functions",
       "scripts": {
         "build": "npm run lint && tsc"
       }
     ...
    
  8. Ajoutez "typescript" en tant que dépendance de développement en exécutant npm install --save-dev typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser.

  9. Pour toutes les dépendances, exécutez npm install --save @types/<dependency>.

  10. Réécrivez le code source de .js à .ts comme vous le souhaitez.

Émuler des fonctions TypeScript

Pour tester les fonctions TypeScript localement, vous pouvez utiliser les outils d'émulation décrits dans Exécuter des fonctions localement. Il est important de compiler votre code avant d'utiliser ces outils. Veillez donc à exécuter npm run build dans votre répertoire de fonctions avant d'exécuter 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 compilation et démarrent l'interface de ligne de commande des fonctions.

Journaux de fonctions pour les projets TypeScript

Lors de l'exécution de firebase deploy, le fichier index.ts de votre projet est transcompilé en index.js. Cela signifie que le journal Cloud Functions génère des numéros de ligne à partir du fichier index.js et non du code que vous avez écrit. Pour vous aider à trouver plus facilement les chemins et les numéros de ligne correspondants dans index.ts, firebase deploy crée functions/lib/index.js.map. Vous pouvez utiliser cette source map dans l'IDE de votre choix ou via un module Node.