获取我们在 Firebase 峰会上发布的所有信息,了解 Firebase 可如何帮助您加快应用开发速度并满怀信心地运行应用。了解详情

Usar TypeScript para funciones en la nube

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

  • Cree y configure proyectos de TypeScript para la transpilación automática en la inicialización (funciones de inicio de firebase init functions ).
  • Transpile la fuente de TypeScript existente a JavaScript en el momento de la implementación a través de un enlace previo a la implementación.

Siguiendo las instrucciones de esta guía, puede migrar un proyecto de JavaScript existente a TypeScript y continuar implementando funciones usando un enlace previo a la implementación para transpilar su código fuente. TypeScript ofrece muchos beneficios sobre JavaScript estándar al escribir funciones:

  • TypeScript es compatible con las funciones de JavaScript más recientes, como async/await, lo que simplifica la gestión de promesas
  • Un linter de Cloud Functions destaca problemas comunes mientras codifica
  • La seguridad de tipos lo ayuda a evitar errores de tiempo de ejecución en las funciones implementadas

Si es nuevo en TypeScript, vea TypeScript en 5 minutos .

Inicializar un nuevo proyecto de Cloud Functions con TypeScript

Ejecute firebase init functions en un nuevo directorio. La herramienta le brinda opciones para construir el proyecto con JavaScript o TypeScript. Elija 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

Una vez completada la inicialización, elimine los comentarios de la muestra en index.ts y ejecute npm run serve para ver una función "Hello World" en acción.

Uso de un proyecto de TypeScript existente

Si tiene un proyecto de TypeScript existente, puede agregar un gancho de implementación previa para asegurarse de que su proyecto se transpile cada vez que implemente su código en Cloud Functions para Firebase. Necesitará un archivo tsconfig.json correctamente formado y un proyecto de Firebase, y deberá realizar las siguientes modificaciones en su configuración de Firebase:

  1. Edite package.json para agregar un script bash para compilar su proyecto de TypeScript. Por ejemplo:

     {
       "name": "functions",
       "scripts": {
         "build": "npm run lint && tsc"
       }
     ...
    
  2. Edite firebase.json para agregar un enlace previo a la implementación para ejecutar el script de compilación. Por ejemplo:

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

Con esta configuración, un firebase deploy --only functions crea su código TypeScript y lo implementa como funciones.

Migrar un proyecto de JavaScript existente a TypeScript

Si tiene un proyecto de Cloud Functions existente que inicializó y desarrolló en JavaScript, puede migrarlo a TypeScript. Le recomendamos encarecidamente que cree un punto de control de git u otra copia de seguridad antes de comenzar.

Para migrar un proyecto existente de JavaScript Cloud Functions:

  1. Cree un punto de control de git y guarde copias de sus archivos fuente de JavaScript existentes.
  2. En el directorio del proyecto, ejecute firebase init functions y seleccione TypeScript cuando se le solicite un idioma para escribir funciones.
  3. Cuando se le pregunte si desea sobrescribir el archivo package.json existente, seleccione No , a menos que esté seguro de que no desea conservar el archivo existente.
  4. Elimine index.ts en el directorio functions/src , reemplazándolo con su código fuente existente.
  5. En el archivo tsconfig.json creado en la inicialización, configure las opciones del compilador para permitir JavaScript: "allowJs": true .
  6. Copie su archivo package.json guardado en el directorio de functions y edítelo para establecer "main" en "lib/index.js" .
  7. También en package.json , agregue un script de compilación para TypeScript como el siguiente:

     {
       "name": "functions",
       "scripts": {
         "build": "npm run lint && tsc"
       }
     ...
    
  8. Agregue "typescript" como una dependencia de desarrollo ejecutando npm install --save-dev typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser .

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

  10. Reescriba el código fuente de .js a .ts según lo desee.

Emulación de funciones de TypeScript

Para probar las funciones de TypeScript localmente, puede usar las herramientas de emulación descritas en Ejecutar funciones localmente . Es importante compilar su código antes de usar estas herramientas, así que asegúrese de ejecutar npm run build dentro de su directorio de funciones antes de ejecutar firebase emulators:start o firebase functions:shell . Como alternativa, ejecute npm run serve o npm run shell como acceso directo; estos comandos ejecutan la compilación y sirven/inician el shell de funciones.

Registros de funciones para proyectos de TypeScript

Durante la implementación de Firebase, el index.ts firebase deploy de su proyecto se transfiere a index.js , lo que significa que el registro de Cloud Functions generará números de línea del archivo index.js y no del código que escribió. Para que le resulte más fácil encontrar las rutas y los números de línea correspondientes en index.ts , firebase deploy crea functions/lib/index.js.map . Puede usar este mapa fuente en su IDE preferido oa través de un módulo de nodo .