Utilizza TypeScript per Cloud Functions

Per gli sviluppatori che preferiscono scrivere funzioni in TypeScript, Cloud Functions offre due tipi di supporto:

  • Crea e configura progetti TypeScript per la traspilazione automatica all'inizializzazione ( firebase init functions ).
  • Transpila l'origine TypeScript esistente in JavaScript al momento della distribuzione tramite un hook di predistribuzione .

Seguendo le istruzioni contenute in questa guida, puoi migrare un progetto JavaScript esistente in TypeScript e continuare a distribuire le funzioni utilizzando un hook predeploy per transpilare il codice sorgente. TypeScript offre molti vantaggi rispetto a JavaScript vanilla durante la scrittura di funzioni:

  • TypeScript supporta le funzionalità JavaScript più recenti come async/await, semplificando la gestione delle promesse
  • Un linter di Cloud Functions evidenzia i problemi comuni durante la codifica
  • L'indipendenza dai tipi aiuta a evitare errori di runtime nelle funzioni distribuite

Se non conosci TypeScript, consulta TypeScript in 5 minuti .

Inizializzazione di un nuovo progetto Cloud Functions con TypeScript

Esegui firebase init functions in una nuova directory. Lo strumento offre opzioni per creare il progetto con JavaScript o TypeScript. Scegli TypeScript per generare la seguente struttura di progetto:

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 volta completata l'inizializzazione, rimuovere il commento dall'esempio in index.ts ed eseguire npm run serve per vedere una funzione "Hello World" in azione.

Utilizzando un progetto TypeScript esistente

Se disponi di un progetto TypeScript esistente, puoi aggiungere un hook di predeploy per assicurarti che il tuo progetto venga transpilato ogni volta che distribuisci il codice su Cloud Functions for Firebase. Avrai bisogno di un file tsconfig.json formato correttamente e di un progetto Firebase e dovrai apportare le seguenti modifiche alla configurazione Firebase:

  1. Modifica package.json per aggiungere uno script bash per creare il tuo progetto TypeScript. Per esempio:

     {
       "name": "functions",
       "scripts": {
         "build": "npm run lint && tsc"
       }
     ...
    
  2. Modifica firebase.json per aggiungere un hook predeploy per eseguire lo script di build. Per esempio:

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

Con questa configurazione, un comando firebase deploy --only functions crea il codice TypeScript e lo distribuisce come funzioni.

Migrazione di un progetto JavaScript esistente a TypeScript

Se disponi di un progetto Cloud Functions esistente che hai inizializzato e sviluppato in JavaScript, puoi migrarlo a TypeScript. Ti consigliamo vivamente di creare un checkpoint git o un altro backup prima di iniziare.

Per eseguire la migrazione di un progetto JavaScript Cloud Functions esistente:

  1. Crea un checkpoint git e salva copie dei file sorgente JavaScript esistenti.
  2. Nella directory del progetto, esegui firebase init functions e seleziona TypeScript quando ti viene richiesto un linguaggio per scrivere le funzioni.
  3. Quando viene richiesto se sovrascrivere il file package.json esistente, selezionare No a meno che non si sia sicuri di non voler mantenere il file esistente.
  4. Elimina index.ts nella directory functions/src , sostituendolo con il codice sorgente esistente.
  5. Nel file tsconfig.json creato al momento dell'inizializzazione, imposta le opzioni del compilatore per consentire JavaScript: "allowJs": true .
  6. Copia il file package.json salvato nella directory functions e modificalo per impostare "main" su "lib/index.js" .
  7. Sempre in package.json , aggiungi uno script di build per TypeScript come il seguente:

     {
       "name": "functions",
       "scripts": {
         "build": "npm run lint && tsc"
       }
     ...
    
  8. Aggiungi "typescript" come dipendenza dev eseguendo npm install --save-dev typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser .

  9. Per tutte le dipendenze, esegui npm install --save @types/<dependency> .

  10. Riscrivi il codice sorgente da .js a .ts come desiderato.

Emulare funzioni TypeScript

Per testare le funzioni TypeScript localmente, è possibile utilizzare gli strumenti di emulazione descritti in Eseguire funzioni localmente . È importante compilare il codice prima di utilizzare questi strumenti, quindi assicurati di eseguire npm run build nella directory delle funzioni prima di eseguire firebase emulators:start o firebase functions:shell . In alternativa, esegui npm run serve o npm run shell come scorciatoia; questi comandi eseguono sia la compilazione che servono/avviano la shell delle funzioni.

Registri di funzioni per progetti TypeScript

Durante firebase deploy , index.ts del tuo progetto viene trasferito in index.js , il che significa che il log di Cloud Functions restituirà i numeri di riga dal file index.js e non il codice che hai scritto. Per facilitare la ricerca dei percorsi e dei numeri di riga corrispondenti in index.ts , firebase deploy functions/lib/index.js.map . Puoi utilizzare questa mappa sorgente nel tuo IDE preferito o tramite un modulo nodo .