Catch up on everything announced at Firebase Summit, and learn how Firebase can help you accelerate app development and run your app with confidence. Learn More

Usar TypeScript para Cloud Functions

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

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 de pré -implantação.

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

  • O TypeScript suporta os 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

Quando a inicialização estiver concluída, remova o comentário da amostra 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 toda vez que você implantar seu código no Cloud Functions para Firebase. Você precisará de um arquivo tsconfig.json devidamente formado 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 compilaçã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 o TypeScript

Se você tiver um projeto do Cloud Functions inicializado e desenvolvido em JavaScript, poderá migrá-lo para o TypeScript. Você é fortemente encorajado a criar um checkpoint git ou outro backup antes de começar.

Para migrar um projeto JavaScript Cloud Functions existente:

  1. Crie um ponto de verificação git e salve cópias de seus arquivos de origem JavaScript existentes.
  2. No diretório do projeto, execute firebase init functions do firebase e selecione TypeScript quando solicitado por uma linguagem para escrever funções.
  3. Quando solicitado 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 no diretório functions/src , substituindo-o pelo 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 seu arquivo package.json salvo no diretório de functions e edite-o para definir "main" como "lib/index.js" .
  7. Também em package.json , adicione um script de compilação para TypeScript como o seguinte:

     {
       "name": "functions",
       "scripts": {
         "build": "npm run lint && tsc"
       }
     ...
    
  8. Adicione "typescript" como uma dependência dev 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 as funções do 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 um atalho; esses comandos executam a compilação e servem/iniciam o shell de funções.

Logs de funções para projetos TypeScript

Durante a firebase deploy do Firebase , o index.ts do seu projeto é index.ts para index.js , o que significa que o registro do Cloud Functions gerará números de linha do arquivo index.js e não do código que você escreveu. Para facilitar a localização dos caminhos e números de linha correspondentes em index.ts , o firebase 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ó .