Per gli sviluppatori che preferiscono scrivere funzioni in TypeScript, Cloud Functions offre due tipi di assistenza:
- Crea e configura progetti TypeScript per la traspilazione automatica all'inizializzazione (
firebase init functions
). - Traspila il codice sorgente TypeScript esistente in JavaScript al momento del deployment tramite un hook predeploy.
Seguendo le istruzioni riportate in questa guida, puoi eseguire la migrazione di un progetto JavaScript esistente a TypeScript e continuare a eseguire il deployment delle 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 più recenti funzionalità JavaScript come asincrono/attesa, semplificando la gestione delle promesse
- Un lint Cloud Functions evidenzia i problemi comuni durante la codifica
- La sicurezza dei tipi consente di evitare errori di runtime nelle funzioni di cui è stato eseguito il deployment
Se è la prima volta che utilizzi TypeScript, vedi TypeScript in 5 minuti.
Inizializzazione di un nuovo progetto Cloud Functions con TypeScript
Esegui firebase init functions
in una nuova directory. Lo strumento ti offre opzioni per creare
del progetto con JavaScript o TypeScript. Scegli TypeScript per generare il file
con 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
Al termine dell'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 già un progetto TypeScript, puoi aggiungere un hook di pre-deployment
Assicurati che il progetto venga eseguito ogni volta che esegui il deployment del codice
Cloud Functions for Firebase. Avrai bisogno di un
file tsconfig.json
formato correttamente e di un progetto Firebase, nonché di apportare
le seguenti modifiche alla configurazione di Firebase:
Modifica
package.json
per aggiungere uno script bash per creare il tuo progetto TypeScript. Ad esempio:{ "name": "functions", "scripts": { "build": "npm run lint && tsc" } ...
Modifica
firebase.json
per aggiungere un hook di predeployment per eseguire lo script di compilazione. Ad esempio:{ "functions": { "predeploy": "npm --prefix functions run build", } }
Con questa configurazione, un comando firebase deploy --only functions
crea il codice TypeScript e ne esegue il deployment come funzioni.
Migrazione di un progetto JavaScript esistente a TypeScript
Se hai già un progetto Cloud Functions che hai inizializzato e sviluppati in JavaScript, puoi eseguirne TypeScript. Ti consigliamo vivamente di creare un checkpoint Git o altro backup prima di iniziare.
Per eseguire la migrazione di un progetto Cloud Functions JavaScript esistente:
- Crea un checkpoint Git e salva copie dei file di origine JavaScript esistenti.
- Nella directory del progetto, esegui
firebase init functions
e selezionaTypeScript
quando viene richiesta una lingua per la scrittura delle funzioni. - Quando ti viene chiesto se sovrascrivere il file
package.json
esistente, seleziona No a meno che tu non abbia la certezza di non voler mantenere il file esistente. - Elimina
index.ts
nella directoryfunctions/src
, sostituendolo con il codice sorgente esistente. - Nel file
tsconfig.json
creato all'inizializzazione, imposta le opzioni del compilatore per consentire JavaScript:"allowJs": true
. - Copia il file
package.json
salvato nella directoryfunctions
e modificalo in modo da impostare"main"
su"lib/index.js"
. Sempre in
package.json
, aggiungi uno script di build per TypeScript come il seguente:{ "name": "functions", "scripts": { "build": "npm run lint && tsc" } ...
Aggiungi
"typescript"
come dipendenza sviluppatore eseguendonpm install --save-dev typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser
.Per tutte le dipendenze, esegui
npm install --save @types/<dependency>
.Riscrivi il codice sorgente da .js a .ts in base alle tue esigenze.
Emulazione di funzioni TypeScript
Per testare le funzioni TypeScript in locale, puoi utilizzare gli strumenti di emulazione descritti in Eseguire 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. Questi comandi eseguono la compilazione e
servono/avviano la shell di funzioni.
Log di Functions per i progetti TypeScript
Durante il periodo firebase deploy
, il valore index.ts
del progetto viene eseguito in index.js
,
il che significa che il log di Cloud Functions restituirà i numeri di riga
index.js
e non il codice che hai scritto. Per aiutarti a trovare più facilmente
percorsi e numeri di riga corrispondenti in index.ts
,
firebase deploy
crea functions/lib/index.js.map
. Puoi usare questa fonte
mappa nel tuo IDE preferito o tramite un modulo di nodi.