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

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

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

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

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

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

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

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