Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

Utiliser TypeScript pour les fonctions Cloud

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

  • Créer et configurer des projets pour tapuscrit transpilation automatique lors de l' initialisation ( firebase init functions d' firebase init functions ).
  • Transpile existante la source tapuscrit JavaScript au moment du déploiement via un crochet predeploy .

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 transpiler votre code source. TypeScript offre de nombreux avantages par rapport à JavaScript vanille lors de l'écriture de fonctions :

  • TypeScript prend en charge les dernières fonctionnalités JavaScript telles que async/wait, 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 êtes nouveau tapuscrit, voir tapuscrit en 5 minutes .

Initialiser un nouveau projet Cloud Functions avec TypeScript

Exécuter firebase init functions d' firebase init functions dans un nouveau répertoire. L'outil vous offre des options pour construire le projet avec JavaScript ou TypeScript. Choisissez tapuscrit à la sortie de 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 de l'échantillon complet, uncomment à index.ts et run npm run serve à voir fonction « Bonjour tout le monde » en action.

Utiliser un projet TypeScript existant

Si vous avez 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 for Firebase. Vous aurez besoin d' un bien formé tsconfig.json fichier et un projet Firebase, et vous aurez besoin d'apporter les modifications suivantes à votre configuration Firebase:

  1. Modifier package.json pour ajouter un script bash pour construire votre projet tapuscrit. Par exemple:

     {
       "name": "functions",
       "scripts": {
         "build": "npm run lint && tsc"
       }
     ...
    
  2. Modifier firebase.json pour ajouter un crochet predeploy pour exécuter le script de compilation. Par exemple:

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

Avec cette configuration, une firebase deploy --only functions commande construit votre code tapuscrit et déploie comme fonctions.

Migrer un projet JavaScript existant vers TypeScript

Si vous avez un projet Cloud Functions existant 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 :

  1. Créez un point de contrôle git et enregistrez des copies de vos fichiers source JavaScript existants.
  2. Dans le répertoire du projet, exécutez firebase init functions d' TypeScript firebase init functions et sélectionnez TypeScript lorsque vous êtes invité pour une langue pour les fonctions d' écriture.
  3. Lorsque vous êtes invité à remplacer l'actuel package.json fichier, sélectionnez Non , sauf si vous êtes sûr que vous ne souhaitez pas conserver le fichier existant.
  4. Supprimer index.ts dans le répertoire des functions/src , remplaçant avec votre code source existant.
  5. Dans le tsconfig.json fichier créé lors de l' initialisation, définissez les options du compilateur JavaScript permettent: "allowJs": true .
  6. Copiez votre sauvegardé package.json fichier dans le functions répertoire, et le modifier pour définir "main" à "lib/index.js" .
  7. De plus en package.json , ajoutez un script de compilation pour tapuscrit comme suit:

     {
       "name": "functions",
       "scripts": {
         "build": "npm run lint && tsc"
       }
     ...
    
  8. Ajouter "typescript" en tant que dépendance de dev 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 en .ts comme vous le souhaitez.

Émuler des fonctions TypeScript

Pour tester les fonctions tapuscrit localement, vous pouvez utiliser les outils d'émulation décrits dans les fonctions Run localement . Il est important de compiler votre code avant d' utiliser ces outils, alors assurez - vous d'exécuter npm run build l' firebase emulators:start firebase functions:shell npm run build dans votre répertoire fonctions avant d' exécuter firebase emulators:start ou firebase functions:shell . En variante, exécuter la npm run serve ou npm run shell comme raccourci; ces commandes exécutent à la fois la construction et servent/démarrent le shell de fonctions.

Journaux de fonctions pour les projets TypeScript

Au cours de firebase deploy , votre projet de index.ts est transpiled à index.js , ce qui signifie que les fonctions de Cloud journal des numéros de ligne de sortie du index.js fichier et non le code que vous avez écrit. Pour le rendre plus facile pour vous de trouver les chemins et les numéros de ligne correspondants dans index.ts , firebase deploy crée des functions/lib/index.js.map . Vous pouvez utiliser cette carte source dans votre IDE préféré ou via un module de noeud .