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

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

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

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

การใช้โปรเจ็กต์ 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 ที่ต้องการหรือผ่านโมดูลโหนด