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

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 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ó .