Usar TypeScript para Cloud Functions

Para desenvolvedores que preferem escrever funções em TypeScript, o Cloud Functions oferece dois tipos de suporte:

  • Crie e configure projetos TypeScript para transpilação automática na inicialização ( firebase init functions ).
  • Transpile a fonte TypeScript existente para JavaScript no momento da implantação por meio de um gancho pré-implantação .

Seguindo as instruções neste guia, você pode migrar um projeto JavaScript existente para TypeScript e continuar implantando funções usando um gancho de pré-implantação para transpilar seu código-fonte. TypeScript oferece muitos benefícios em relação ao JavaScript vanilla ao escrever funções:

  • TypeScript oferece suporte aos recursos JavaScript mais recentes, como async/await, simplificando o gerenciamento de promessas
  • Um linter do Cloud Functions destaca problemas comuns durante a codificação
  • A segurança de tipo ajuda a evitar erros de tempo de execução em funções implantadas

Se você é novo no TypeScript, consulte TypeScript em 5 minutos .

Inicializando um novo projeto do Cloud Functions com TypeScript

Execute firebase init functions em um novo diretório. A ferramenta oferece opções para construir o projeto com JavaScript ou TypeScript. Escolha TypeScript para gerar a seguinte estrutura de projeto:

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

Assim que a inicialização for concluída, remova o comentário do exemplo em index.ts e execute npm run serve para ver uma função "Hello World" em ação.

Usando um projeto TypeScript existente

Se você tiver um projeto TypeScript existente, poderá adicionar um gancho de pré-implantação para garantir que seu projeto seja transpilado sempre que você implantar seu código no Cloud Functions para Firebase. Você precisará de um arquivo tsconfig.json formado corretamente e de um projeto do Firebase, além de fazer as seguintes modificações na configuração do Firebase:

  1. Edite package.json para adicionar um script bash para construir seu projeto TypeScript. Por exemplo:

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

  2. Edite firebase.json para adicionar um gancho de pré-implantação para executar o script de construção. Por exemplo:

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

Com essa configuração, um comando firebase deploy --only functions cria seu código TypeScript e o implanta como funções.

Migrando um projeto JavaScript existente para TypeScript

Se você tiver um projeto do Cloud Functions inicializado e desenvolvido em JavaScript, poderá migrá-lo para TypeScript. É altamente recomendável criar um ponto de verificação git ou outro backup antes de começar.

Para migrar um projeto JavaScript existente do Cloud Functions:

  1. Crie um ponto de verificação git e salve cópias dos arquivos de origem JavaScript existentes.
  2. No diretório do projeto, execute firebase init functions e selecione TypeScript quando for solicitado um idioma para escrever funções.
  3. Quando for perguntado se deseja substituir o arquivo package.json existente, selecione Não , a menos que tenha certeza de que não deseja manter o arquivo existente.
  4. Exclua index.ts do diretório functions/src , substituindo-o pelo seu código-fonte existente.
  5. No arquivo tsconfig.json criado na inicialização, defina as opções do compilador para permitir JavaScript: "allowJs": true .
  6. Copie o arquivo package.json salvo no diretório functions e edite-o para definir "main" como "lib/index.js" .

  7. Também em package.json , adicione um script de construção para TypeScript como o seguinte:

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

  8. Adicione "typescript" como uma dependência de desenvolvimento executando npm install --save-dev typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser .

  9. Para todas as dependências, execute npm install --save @types/<dependency> .

  10. Reescreva o código-fonte de .js para .ts conforme desejado.

Emulando funções TypeScript

Para testar funções TypeScript localmente, você pode usar as ferramentas de emulação descritas em Executar funções localmente . É importante compilar seu código antes de usar essas ferramentas, portanto, certifique-se de executar npm run build dentro do diretório de funções antes de executar firebase emulators:start ou firebase functions:shell . Como alternativa, execute npm run serve ou npm run shell como atalho; esses comandos executam a construção e servem/iniciam o shell de funções.

Logs de funções para projetos TypeScript

Durante firebase deploy , index.ts do seu projeto é transpilado para index.js , o que significa que o log do Cloud Functions gerará números de linha do arquivo index.js e não o código que você escreveu. Para facilitar a localização dos caminhos e números de linha correspondentes em index.ts , firebase deploy cria functions/lib/index.js.map . Você pode usar este mapa de origem em seu IDE preferido ou por meio de um módulo de nó .