Usa TypeScript para Cloud Functions

Para los desarrolladores que prefieren escribir funciones en TypeScript, Cloud Functions proporciona dos tipos de asistencia:

  • Crear y configurar proyectos de TypeScript para que se transpilen automáticamente en el momento de la inicialización (firebase init functions)
  • Transpilar una fuente de TypeScript existente a JavaScript en el momento de la implementación a través de un hook previo a la implementación

Con las instrucciones de esta guía, podrás migrar un proyecto existente de JavaScript a TypeScript y seguir implementando funciones con un hook previo a la implementación para transpilar tu código fuente. A la hora de escribir funciones, TypeScript ofrece muchas ventajas en comparación con el JavaScript convencional:

  • TypeScript es compatible con las características más recientes de JavaScript, como async/await, lo que simplifica la administración de promesas.
  • Un linter de Cloud Functions destaca problemas comunes mientras escribes el código.
  • La seguridad de tipos te ayuda a evitar errores durante el tiempo de ejecución en las funciones implementadas.

Si es la primera vez que usas TypeScript, consulta TypeScript en 5 minutos.

Inicializa un nuevo proyecto de Cloud Functions con TypeScript

Ejecuta firebase init functions en un directorio nuevo. La herramienta te ofrece opciones para compilar el proyecto con JavaScript o TypeScript. Selecciona TypeScript para generar la siguiente estructura de proyecto:

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

Cuando se complete la inicialización, quita el comentario de la muestra en index.ts y ejecuta npm run serve para ver una función “Hello World” en acción.

Cómo usar un proyecto existente de TypeScript

Si ya tienes un proyecto de TypeScript, puedes agregar un hook previo a la implementación para asegurarte de que el proyecto se transpile cada vez que implementes tu código en Cloud Functions for Firebase. Necesitarás un archivo tsconfig.json con el formato correcto y un proyecto de Firebase. Además, deberás hacer las siguientes modificaciones en tu configuración de Firebase:

  1. Edita package.json para agregar una secuencia de comandos bash a fin de compilar tu proyecto de TypeScript. Por ejemplo:

     {
   "name": "functions",
   "scripts": {
     "build": "npm run lint && tsc"
   }
 ...

  2. Edita firebase.json para agregar un hook previo a la implementación y ejecutar la secuencia de comandos de compilación. Por ejemplo:

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

Con esta configuración, un comando firebase deploy --only functions compila tu código de TypeScript y lo implementa como funciones.

Cómo migrar un proyecto existente de JavaScript a TypeScript

Si tienes un proyecto de Cloud Functions que inicializaste y programaste en JavaScript, puedes migrarlo a TypeScript. Te recomendamos que crees un punto de control de git o una copia de seguridad de otro tipo antes de comenzar.

Para migrar un proyecto de Cloud Functions de JavaScript existente, haz lo siguiente:

  1. Crea un punto de control de git y guarda copias de tus archivos originales de JavaScript existentes.
  2. En el directorio del proyecto, ejecuta firebase init functions y selecciona TypeScript cuando se te pida que selecciones un lenguaje para escribir funciones.
  3. Cuando se te pregunte si quieres reemplazar el archivo package.json existente, selecciona No, a menos que estés seguro de no querer conservarlo.
  4. Borra index.ts en el directorio functions/src y reemplázalo por tu código fuente existente.
  5. En el archivo tsconfig.json creado en la inicialización, configura las opciones del compilador para permitir JavaScript: "allowJs": true.
  6. Copia el archivo package.json guardado en el directorio functions y edítalo para asignar el valor "main" a "lib/index.js".

  7. También en package.json, agrega una secuencia de comandos de compilación para TypeScript como la siguiente:

     {
   "name": "functions",
   "scripts": {
     "build": "npm run lint && tsc"
   }
 ...

  8. Ejecuta npm install --save-dev typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser para agregar "typescript" como una dependencia de programación.

  9. Para todas las dependencias, ejecuta npm install --save @types/<dependency>.

  10. Vuelve a escribir el código fuente de .js a .ts como desees.

Emula funciones de TypeScript

Puedes usar las herramientas de emulación que se describen en Ejecuta funciones de manera local para probar las funciones de TypeScript localmente. Antes de usar estas herramientas, es importante que compiles tu código. Asegúrate de ejecutar npm run build en el directorio de funciones antes de ejecutar firebase emulators:start o firebase functions:shell. Otra opción es ejecutar npm run serve o npm run shell como atajo, ya que ambos comandos ejecutan la compilación y entregan o inician el shell de las funciones.

Registros de funciones para proyectos de TypeScript

Durante firebase deploy, el archivo index.ts de tu proyecto se transpila a index.js, lo que significa que el registro de Cloud Functions generará números de líneas desde el archivo index.js y no desde el código que escribiste. Para que puedas encontrar las rutas y los números de línea en index.ts, firebase deploy crea functions/lib/index.js.map. Puedes usar este mapa de origen en tu IDE preferido o con un módulo de nodos.