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

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

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

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

• TypeScript รองรับคุณสมบัติ JavaScript ล่าสุด เช่น async/await ทำให้การจัดการสัญญาง่ายขึ้น
• A Cloud Functions linter เน้นปัญหาทั่วไปในขณะที่คุณเข้ารหัส
• ความปลอดภัยของประเภทช่วยให้คุณหลีกเลี่ยงข้อผิดพลาดรันไทม์ในฟังก์ชันที่ปรับใช้

หากคุณยังใหม่กับ 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 ก่อนปรับใช้เพื่อให้แน่ใจว่าโปรเจ็กต์ของคุณถูก transpiled ทุกครั้งที่คุณปรับใช้โค้ดของคุณกับ Cloud Functions for Firebase คุณจะต้องมีไฟล์ tsconfig.json ที่มีรูปแบบเหมาะสมและโปรเจ็กต์ Firebase และต้องทำการปรับเปลี่ยนการกำหนดค่า Firebase ดังต่อไปนี้

1. แก้ไข package.json เพื่อเพิ่ม bash script เพื่อสร้างโครงการ TypeScript ของคุณ ตัวอย่างเช่น:

    {
      "name": "functions",
      "scripts": {
        "build": "npm run lint && tsc"
      }
    ...
   

2. แก้ไข firebase.json เพื่อเพิ่ม hook predeploy เพื่อรันสคริปต์บิลด์ ตัวอย่างเช่น:

    {
      "functions": {
        "predeploy": "npm --prefix functions run build",
      }
    }
   

ด้วยการกำหนดค่านี้ คำสั่ง firebase deploy --only 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 ที่มีอยู่หรือไม่ ให้เลือก No เว้นแต่คุณจะแน่ใจว่าไม่ต้องการเก็บไฟล์ที่มีอยู่
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" เป็นการพึ่งพา dev โดยเรียกใช้ npm install --save-dev typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser

9. สำหรับการขึ้นต่อกันทั้งหมด ให้รัน npm install --save @types/<dependency>

10. เขียนซอร์สโค้ดใหม่จาก .js เป็น .ts ตามต้องการ

การจำลองฟังก์ชัน TypeScript

ในการทดสอบฟังก์ชัน TypeScript ในเครื่อง คุณสามารถใช้เครื่องมือจำลองที่อธิบายไว้ใน ฟังก์ชัน Run ใน เครื่อง คอมไพล์โค้ดของคุณก่อนที่จะใช้เครื่องมือเหล่านี้เป็นสิ่งสำคัญ ดังนั้นตรวจสอบให้แน่ใจว่าได้รัน npm run build ภายในไดเร็กทอรี functions ของคุณก่อนที่จะรัน firebase emulators:start หรือ firebase functions:shell อีกทางหนึ่ง ให้รัน npm run serve หรือ npm run shell เป็นช็อตคัท คำสั่งเหล่านี้ทั้งรันบิลด์และให้บริการ/เริ่มฟังก์ชันเชลล์

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

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