ใช้ TypeScript สำหรับ Cloud Functions

สำหรับนักพัฒนาแอปที่ต้องการเขียนฟังก์ชันใน TypeScript Cloud Functions มีการรองรับ 2 ประเภท ดังนี้

  • สร้างและกำหนดค่าโปรเจ็กต์ TypeScript สำหรับการ Transpile อัตโนมัติเมื่อเริ่มต้น (firebase init functions)
  • ทำการ Transpile แหล่งที่มา TypeScript ที่มีอยู่เป็น JavaScript ณ เวลาที่ทำให้ใช้งานได้ผ่าน predeploy hook

เมื่อทำตามวิธีการในคู่มือนี้ คุณจะย้ายข้อมูลโปรเจ็กต์ JavaScript ที่มีอยู่ไปยัง TypeScript และติดตั้งใช้งานฟังก์ชันต่อไปได้โดยใช้ฮุกก่อนติดตั้งใช้งานเพื่อทำการ Transpile ซอร์สโค้ด TypeScript มีประโยชน์มากมายเหนือกว่า JavaScript แบบธรรมดาเมื่อเขียนฟังก์ชัน ดังนี้

  • TypeScript รองรับฟีเจอร์ JavaScript ล่าสุด เช่น async/await ซึ่งช่วยให้จัดการ Promise ได้ง่ายขึ้น
  • Linter ของ Cloud Functions จะไฮไลต์ปัญหาที่พบได้ทั่วไปขณะที่คุณเขียนโค้ด
  • ความปลอดภัยในการกำหนดประเภทช่วยให้คุณหลีกเลี่ยงข้อผิดพลาดขณะรันไทม์ในฟังก์ชันที่ติดตั้งใช้งานได้

หากคุณเพิ่งเริ่มใช้ TypeScript โปรดดู TypeScript ใน 5 นาที

กำลังเริ่มต้นโปรเจ็กต์ Cloud Functions ใหม่ด้วย TypeScript

เรียกใช้ firebase init functions ในไดเรกทอรีใหม่ เครื่องมือนี้ให้ตัวเลือกในการสร้างโปรเจ็กต์ด้วย JavaScript หรือ TypeScript เลือก TypeScript เพื่อแสดงโครงสร้างโปรเจ็กต์ต่อไปนี้

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

เมื่อการเริ่มต้นเสร็จสมบูรณ์แล้ว ให้ยกเลิกการคอมเมนต์ตัวอย่างใน index.ts แล้วเรียกใช้ npm run serve เพื่อดูการทำงานของฟังก์ชัน "Hello World"

การใช้โปรเจ็กต์ TypeScript ที่มีอยู่

หากมีโปรเจ็กต์ TypeScript อยู่แล้ว คุณสามารถเพิ่มฮุกก่อนทำให้ใช้งานได้เพื่อให้แน่ใจว่าโปรเจ็กต์จะได้รับการ Transpile ทุกครั้งที่คุณทำให้โค้ดใช้งานได้ใน Cloud Functions for Firebase คุณจะต้องมีไฟล์ tsconfig.json ที่มีรูปแบบถูกต้องและโปรเจ็กต์ Firebase และคุณจะต้องทำการแก้ไขต่อไปนี้ในการกำหนดค่า Firebase

  1. แก้ไข package.json เพื่อเพิ่มสคริปต์ Bash เพื่อสร้างโปรเจ็กต์ TypeScript เช่น

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

  2. แก้ไข firebase.json เพื่อเพิ่มฮุกก่อนการทำให้ใช้งานได้เพื่อเรียกใช้สคริปต์บิลด์ เช่น

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

เมื่อใช้การกำหนดค่านี้ คำสั่ง firebase deploy --only functions จะสร้างโค้ด TypeScript และทำให้ใช้งานได้เป็นฟังก์ชัน

การย้ายข้อมูลโปรเจ็กต์ JavaScript ที่มีอยู่ไปยัง TypeScript

หากคุณมีโปรเจ็กต์ Cloud Functions ที่เริ่มต้นและพัฒนาใน JavaScript อยู่แล้ว คุณสามารถย้ายข้อมูลไปยัง TypeScript ได้ เราขอแนะนำอย่างยิ่งให้สร้างจุดตรวจสอบ Git หรือการสำรองข้อมูลอื่นๆ ก่อนเริ่มต้น

วิธีย้ายข้อมูลโปรเจ็กต์ JavaScript Cloud Functions ที่มีอยู่

  1. สร้างจุดตรวจสอบ Git และบันทึกสำเนาไฟล์ต้นฉบับ JavaScript ที่มีอยู่
  2. ในไดเรกทอรีโปรเจ็กต์ ให้เรียกใช้ firebase init functions และเลือก TypeScript เมื่อระบบแจ้งให้เลือกภาษาสำหรับการเขียนฟังก์ชัน
  3. เมื่อระบบถามว่าจะเขียนทับไฟล์ package.json ที่มีอยู่หรือไม่ ให้เลือกไม่ เว้นแต่คุณแน่ใจว่าไม่ต้องการเก็บไฟล์ที่มีอยู่ไว้
  4. ลบ index.ts ในไดเรกทอรี functions/src แล้วแทนที่ด้วยซอร์สโค้ดที่มีอยู่
  5. ในไฟล์ tsconfig.json ที่สร้างขึ้นเมื่อเริ่มต้น ให้ตั้งค่าตัวเลือกคอมไพเลอร์เพื่ออนุญาต JavaScript: "allowJs": true
  6. คัดลอกไฟล์ package.json ที่บันทึกไว้ลงในไดเรกทอรี functions แล้วแก้ไขเพื่อตั้งค่า "main" เป็น "lib/index.js"

  7. นอกจากนี้ ใน package.json ให้เพิ่มสคริปต์บิลด์สำหรับ TypeScript ดังต่อไปนี้

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

  8. เพิ่ม "typescript" เป็นทรัพยากร Dependency สำหรับนักพัฒนาซอฟต์แวร์โดยเรียกใช้ npm install --save-dev typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser

  9. เรียกใช้ npm install --save @types/<dependency> สำหรับทรัพยากร Dependency ทั้งหมด

  10. เขียนซอร์สโค้ดใหม่จาก .js เป็น .ts ตามต้องการ

การจำลองฟังก์ชัน TypeScript

หากต้องการทดสอบฟังก์ชัน TypeScript ในเครื่อง คุณสามารถใช้เครื่องมือจำลองที่อธิบายไว้ในเรียกใช้ฟังก์ชันในเครื่อง คุณต้องคอมไพล์โค้ดก่อนใช้เครื่องมือเหล่านี้ ดังนั้นอย่าลืมเรียกใช้ npm run build ภายในไดเรกทอรีฟังก์ชันก่อนเรียกใช้ firebase emulators:start หรือ firebase functions:shell หรือจะเรียกใช้ npm run serve หรือ npm run shell เป็นทางลัดก็ได้ โดยคำสั่งทั้ง 2 รายการนี้จะเรียกใช้บิลด์และแสดง/เริ่มเชลล์ของฟังก์ชัน

บันทึกของ Functions สำหรับโปรเจ็กต์ TypeScript

ในระหว่างfirebase deploy index.tsของโปรเจ็กต์จะได้รับการ Transpile เป็น index.js ซึ่งหมายความว่าบันทึก Cloud Functions จะแสดงหมายเลขบรรทัดจากไฟล์ index.js ไม่ใช่โค้ดที่คุณเขียน firebase deploy จะสร้าง functions/lib/index.js.map เพื่อให้คุณค้นหาเส้นทางและหมายเลขบรรทัดที่เกี่ยวข้องใน index.ts ได้ง่ายขึ้น คุณสามารถใช้แผนที่แหล่งที่มานี้ใน IDE ที่ต้องการหรือผ่านโมดูลโหนด