Bagi developer yang lebih memilih untuk menulis fungsi di TypeScript, Cloud Functions menyediakan 2 jenis dukungan:
- Membuat dan mengonfigurasi project TypeScript untuk transpilasi otomatis pada saat inisialisasi (
firebase init functions
). - Melakukan transpilasi sumber TypeScript yang ada ke JavaScript saat deploy melalui hook pra-deploy.
Dengan mengikuti petunjuk dalam panduan ini, Anda dapat memindahkan project JavaScript yang ada ke TypeScript, dan terus menerapkan fungsi menggunakan hook pra penerapan untuk melakukan transpilasi kode sumber. TypeScript memberikan banyak manfaat melalui vanilla JavaScript saat menulis fungsi:
- TypeScript mendukung fitur JavaScript terbaru seperti async/await, sehingga menyederhanakan pengelolaan promise
- Linter Cloud Functions menyoroti masalah umum saat Anda melakukan coding
- Keamanan TypeScript membantu Anda terhindar dari error runtime dalam fungsi yang di-deploy
Jika Anda baru menggunakan TypeScript, lihat TypeScript dalam 5 menit.
Menginisialisasi project Cloud Functions baru dengan TypeScript
Jalankan firebase init functions
dalam direktori baru. Alat ini memberi Anda opsi untuk membuat project dengan JavaScript atau TypeScript. Pilih TypeScript untuk menampilkan struktur project berikut:
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
Setelah inisialisasi selesai, hapus tanda komentar pada sampel di index.ts dan jalankan npm run serve
untuk melihat cara kerja fungsi "Halo Dunia".
Menggunakan project TypeScript yang ada
Jika sudah memiliki project TypeScript, Anda dapat menambahkan hook pra-deploy untuk memastikan project Anda ditranspilasi setiap kali Anda men-deploy kode ke Cloud Functions for Firebase. Anda memerlukan file tsconfig.json
yang dibuat dengan benar dan sebuah project Firebase, dan Anda perlu melakukan modifikasi berikut ini terhadap konfigurasi Firebase Anda:
Edit
package.json
untuk menambahkan skrip bash untuk membuat project TypeScript. Contoh:{ "name": "functions", "scripts": { "build": "npm run lint && tsc" } ...
Edit
firebase.json
untuk menambahkan hook pra-deploy untuk menjalankan skrip build. Contoh:{ "functions": { "predeploy": "npm --prefix functions run build", } }
Dengan konfigurasi ini, perintah firebase deploy --only functions
akan membuat kode TypeScript Anda dan men-deploy-nya sebagai function.
Memindahkan project JavaScript yang ada ke TypeScript
Jika Anda memiliki project Cloud Functions yang diinisialisasi dan dikembangkan di JavaScript, Anda dapat memindahkannya ke TypeScript. Anda sangat dianjurkan untuk membuat checkpoint git atau backup lainnya sebelum memulai.
Untuk memindahkan project JavaScript Cloud Functions yang ada:
- Buat checkpoint git dan simpan salinan file sumber JavaScript yang ada.
- Di direktori project, jalankan
firebase init functions
lalu pilihTypeScript
saat ditanya bahasa untuk penulisan fungsi. - Saat ditanya apakah ingin menimpa file
package.json
yang ada atau tidak, pilih Tidak kecuali Anda yakin tidak ingin menyimpan file yang ada. - Hapus
index.ts
di dalam direktorifunctions/src
, dan ganti dengan kode sumber yang ada. - Di file
tsconfig.json
yang dibuat saat inisialisasi, setel opsi kompilator untuk mengizinkan JavaScript:"allowJs": true
. - Salin file
package.json
yang tersimpan ke dalam direktorifunctions
, lalu edit untuk menyetel"main"
ke"lib/index.js"
. Juga di
package.json
, tambahkan skrip build untuk TypeScript seperti berikut:{ "name": "functions", "scripts": { "build": "npm run lint && tsc" } ...
Tambahkan
"typescript"
sebagai dependensi dev dengan menjalankannpm install --save-dev typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser
.Untuk semua dependensi, jalankan
npm install --save @types/<dependency>
.Tulis ulang kode sumber dari .js menjadi .ts sesuai keinginan.
Mengemulasi fungsi TypeScript
Untuk menguji fungsi TypeScript secara lokal, Anda dapat menggunakan alat emulasi yang dijelaskan di bagian Menjalankan fungsi secara lokal. Sebaiknya Anda mengompilasi kode Anda sebelum menggunakan alat ini, jadi pastikan untuk menjalankan npm run build
di dalam direktori fungsi sebelum menjalankan firebase emulators:start
atau firebase functions:shell
. Sebagai alternatif, jalankan npm run serve
atau npm run shell
sebagai pintasan; kedua perintah ini menjalankan build dan menyalurkan/memulai shell fungsi.
Log fungsi untuk project TypeScript
Selama tahap firebase deploy
, project index.ts
Anda ditranspilasi ke index.js
, yang berarti log Cloud Functions akan menghasilkan nomor baris dari file index.js
dan bukan dari kode yang Anda tulis. Untuk memudahkan Anda menemukan jalur dan nomor baris di index.ts
, firebase deploy
membuat functions/lib/index.js.map
. Anda dapat menggunakan peta sumber ini di IDE yang Anda pilih atau melalui modul node.