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

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

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

ด้วยการปฏิบัติตามวิธีการในคู่มือนี้ คุณสามารถย้ายข้อมูลโปรเจ็กต์ 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 อยู่แล้ว คุณสามารถเพิ่ม Hook ที่ทำให้ใช้งานได้ล่วงหน้าเพื่อให้แน่ใจว่าจะมีการเปลี่ยนรูปแบบทุกครั้งที่ทำให้โค้ดใช้งานได้กับ 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. สำหรับทรัพยากร 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 ไม่ใช่โค้ดที่คุณเขียน เพื่อให้คุณค้นหาเส้นทางและหมายเลขบรรทัดที่สอดคล้องกันใน index.ts ได้ง่ายขึ้น firebase deploy จะสร้าง functions/lib/index.js.map คุณใช้แผนที่แหล่งที่มานี้ใน IDE ที่ต้องการหรือผ่านโมดูลโหนดได้