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

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

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

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

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

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

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

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

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

     {
   "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" เป็นการขึ้นต่อกันของ Dev โดยเรียกใช้ npm install --save-dev typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser

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

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

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

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

บันทึกฟังก์ชันสำหรับโปรเจ็กต์ TypeScript

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