Menggunakan TypeScript untuk Cloud Functions

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:

  1. Edit package.json untuk menambahkan skrip bash untuk membuat project TypeScript. Contoh:

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

  2. 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:

  1. Buat checkpoint git dan simpan salinan file sumber JavaScript yang ada.
  2. Di direktori project, jalankan firebase init functions lalu pilih TypeScript saat ditanya bahasa untuk penulisan fungsi.
  3. Saat ditanya apakah ingin menimpa file package.json yang ada atau tidak, pilih Tidak kecuali Anda yakin tidak ingin menyimpan file yang ada.
  4. Hapus index.ts di dalam direktori functions/src, dan ganti dengan kode sumber yang ada.
  5. Di file tsconfig.json yang dibuat saat inisialisasi, setel opsi kompilator untuk mengizinkan JavaScript: "allowJs": true.
  6. Salin file package.json yang tersimpan ke dalam direktori functions, lalu edit untuk menyetel "main" ke "lib/index.js".

  7. Juga di package.json, tambahkan skrip build untuk TypeScript seperti berikut:

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

  8. Tambahkan "typescript" sebagai dependensi dev dengan menjalankan npm install --save-dev typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser.

  9. Untuk semua dependensi, jalankan npm install --save @types/<dependency>.

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