Usa TypeScript per Cloud Functions

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

  • Crea e configura progetti TypeScript per la transpilazione automatica all'inizializzazione (firebase init functions).
  • Esegui il transpile del codice sorgente TypeScript esistente in JavaScript al momento del deployment tramite un hook di pre-deployment.

Seguendo le istruzioni di questa guida, puoi eseguire la migrazione di un progetto JavaScript esistente a TypeScript e continuare a eseguire il deployment delle funzioni utilizzando un hook di pre-deployment per transpilare il codice sorgente. TypeScript offre molti vantaggi rispetto a JavaScript vanilla quando si scrivono funzioni:

  • TypeScript supporta le funzionalità JavaScript più recenti, come async/await, semplificando la gestione delle promise
  • Un linter Cloud Functions evidenzia i problemi comuni durante la programmazione
  • La sicurezza dei tipi ti aiuta a evitare errori di runtime nelle funzioni di cui è stato eseguito il deployment

Se non hai mai utilizzato TypeScript, consulta TypeScript in 5 minutes.

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 del 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, rimuovi il commento dall'esempio in index.ts ed esegui npm run serve per vedere una funzione "Hello World" in azione.

Utilizzo di un progetto TypeScript esistente

Se hai un progetto TypeScript esistente, puoi aggiungere un hook di pre-deployment per assicurarti che il progetto venga transpilato ogni volta che esegui il deployment del codice in Cloud Functions for Firebase. Devi avere un file tsconfig.json con un formato corretto e un progetto Firebase, oltre ad apportare le seguenti modifiche alla configurazione di Firebase:

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

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

  2. Modifica firebase.json per aggiungere un hook di pre-deployment per eseguire lo script di build. Ad esempio:

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

Con questa configurazione, un comando firebase deploy --only functions crea il codice TypeScript ed esegue il deployment come funzioni.

Migrazione di un progetto JavaScript esistente a TypeScript

Se hai un progetto Cloud Functions esistente che hai inizializzato e sviluppato in JavaScript, puoi eseguirne la migrazione 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 di codice sorgente JavaScript esistenti.
  2. Nella directory del progetto, esegui firebase init functions e seleziona TypeScript quando ti viene chiesto di scegliere un linguaggio per la scrittura delle funzioni.
  3. Quando ti viene chiesto se vuoi sovrascrivere il file package.json esistente, seleziona No, a meno che tu non abbia la certezza di non voler conservare il file esistente.
  4. Elimina index.ts nella directory functions/src, sostituendolo con il codice sorgente esistente.
  5. Nel file tsconfig.json creato durante l'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 di sviluppo 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 preferisci.

Emulazione delle funzioni TypeScript

Per testare le funzioni TypeScript in locale, puoi utilizzare gli strumenti di emulazione descritti in Esegui le funzioni in locale. È importante compilare il codice prima di utilizzare questi strumenti, quindi assicurati di eseguire npm run build all'interno della 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. Entrambi i comandi eseguono la build e forniscono/avviano la shell di Functions.

Log di Functions per i progetti TypeScript

Durante firebase deploy, il index.ts del tuo progetto viene transpilato in index.js, il che significa che il log di Cloud Functions restituirà i numeri di riga del file index.js e non del codice che hai scritto. Per semplificare la ricerca dei percorsi e dei numeri di riga corrispondenti in index.ts, firebase deploy crea functions/lib/index.js.map. Puoi utilizzare questa mappa di origine nell'IDE che preferisci o tramite un modulo nodo.