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

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

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

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

  • TypeScript รองรับฟีเจอร์ JavaScript ล่าสุด เช่น ไม่ซิงค์/รอ ทำให้การจัดการสัญญาง่ายขึ้น
  • โปรแกรมวิเคราะห์ 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 อยู่แล้ว คุณจะเพิ่มฮุกก่อนทำให้ใช้งานได้เพื่อให้แน่ใจว่าระบบจะเปลี่ยนรูปแบบโปรเจ็กต์ทุกครั้งที่คุณทำให้โค้ดใช้งานได้กับ 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 หรือข้อมูลสำรองอื่นๆ ก่อนเริ่มต้น

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

  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. สำหรับทรัพยากร 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 เป็นทางลัด คำสั่งเหล่านี้จะเรียกใช้ทั้งบิลด์และบริการ/เริ่มต้น Shell ฟังก์ชัน

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

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