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

สำหรับนักพัฒนาซอฟต์แวร์ที่ต้องการเขียนฟังก์ชันใน TypeScript Cloud Functions ให้การสนับสนุน 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 หรือสำรองข้อมูลอื่นๆ ก่อนเริ่ม

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

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

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