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 saat inisialisasi (firebase init functions).
  • Melakukan transpilasi sumber TypeScript yang ada ke JavaScript saat penerapan melalui hook pra penerapan.

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 waktu proses dalam fungsi yang diterapkan

Untuk mengetahui contoh Cloud Functions yang berfungsi dan ditulis di TypeScript, lihat typescript-getting-started di repo GitHub kami. Jika TypeScript merupakan hal yang baru bagi Anda, lihat TypeScript dalam 5 menit.

Menginisialisasi project Cloud Functions baru dengan TypeScript

Jalankan firebase init di direktori baru. Fitur 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
      |
      +- tslint.json # Optional file
      |
      +- 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

Menggunakan project TypeScript yang ada

Jika sudah memiliki project TypeScript, Anda dapat menambahkan hook pra penerapan untuk memastikan project tersebut ditranspilasi setiap kali Anda menerapkan kode ke Fitur Cloud untuk Firebase. Anda memerlukan file tsconfig.json yang dibuat dengan benar dan sebuah project Firebase, dan Anda harus melakukan modifikasi berikut pada konfigurasi Firebase:

  1. Edit package.json guna menambahkan skrip bash untuk membuat project TypeScript Anda. Misalnya:

     {
       "name": "functions",
       "scripts": {
         "build": "./node_modules/.bin/tslint -p tslint.json && ./node_modules/.bin/tsc"
       }
     ...
    
  2. Edit firebase.json guna menambahkan hook pra penerapan untuk menjalankan skrip build. Misalnya:

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

Dengan konfigurasi ini, perintah firebase deploy --only functions akan membuat kode TypeScript Anda dan menerapkannya sebagai fungsi.

Memindahkan project JavaScript yang ada ke TypeScript

Jika Anda memiliki project Cloud Functions yang diinisialisasi dan dikembangkan di JavaScript, Anda dapat memidahkannya 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. Dalam direktori project, jalankan firebase init functions lalu pilih TypeScript saat diminta memilih bahasa untuk fungsi penulisan.
  3. Saat ditanya apakah ingin menimpa file package.json yang ada atau tidak, pilih No kecuali jika Anda yakin tidak ingin menyimpan file tersebut.
  4. Hapus index.ts dalam direktori functions/src, dan ganti dengan kode sumber yang ada.
  5. Dalam file tsconfig.json yang dibuat saat inisialisasi, setel opsi compiler agar mengizinkan JavaScript: "allowJs": "true".
  6. Salin file package.json yang telah Anda simpan ke direktori functions, lalu edit untuk menetapkan "main" ke "lib/index.js".
  7. Selain itu, di package.json, tambahkan skrip build untuk TypeScript seperti berikut ini:

     {
       "name": "functions",
       "scripts": {
         "build": "./node_modules/.bin/tslint --project tsconfig.json && ./node_modules/.bin/tsc"
       }
     ...
    
  8. Tambahkan "typescript" sebagai dependensi dev dengan menjalankan npm install --save --only=dev tslint typescript.

  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 fitur emulasi yang dijelaskan dalam Menjalankan fungsi secara lokal. Sebelum menggunakan fitur ini, sangatlah penting untuk mengompilasi kode Anda. Oleh karena itu, pastikan untuk menjalankan npm run build di dalam direktori fungsi Anda sebelum menjalankan firebase serve atau firebase functions:shell. Atau, jalankan npm run serve atau npm run shell sebagai pintasan; kedua perintah ini menjalankan build dan menayangkan/memulai shell fungsi.

Log fungsi untuk project TypeScript

Selama tahap firebase deploy, index.ts project Anda ditranspilasi menjadi index.js. Artinya, log Cloud Functions akan menampilkan nomor baris dari file index.js dan bukan kode yang Anda tulis. Untuk memudahkan Anda menemukan lokasi dan nomor baris yang sesuai di index.ts, firebase deploy akan membuat functions/lib/index.js.map. Anda dapat menggunakan peta sumber ini di IDE pilihan Anda atau melalui modul node.

Kirim masukan tentang...

Butuh bantuan? Kunjungi halaman dukungan kami.