ใช้ TypeScript สำหรับฟังก์ชันคลาวด์

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

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

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

  • TypeScript รองรับฟีเจอร์ JavaScript ล่าสุด เช่น async/await ทำให้การจัดการสัญญาง่ายขึ้น
  • ส่วน 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 เพื่อเพิ่มสคริปต์ทุบตีเพื่อสร้างโปรเจ็กต์ TypeScript ของคุณ ตัวอย่างเช่น:

     {
       "name": "functions",
       "scripts": {
         "build": "npm run lint && tsc"
       }
     ...
    
  2. แก้ไข firebase.json เพื่อเพิ่ม hook ที่ปรับใช้ล่วงหน้าเพื่อเรียกใช้สคริปต์บิลด์ ตัวอย่างเช่น:

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

ด้วยการกำหนดค่านี้ คำสั่ง firebase deploy --only functions จะสร้างโค้ด TypeScript ของคุณและปรับใช้เป็นฟังก์ชัน

การย้ายโครงการ JavaScript ที่มีอยู่ไปยัง TypeScript

หากคุณมีโปรเจ็กต์ Cloud Functions ที่คุณเริ่มต้นและพัฒนาใน JavaScript อยู่แล้ว คุณจะย้ายโปรเจ็กต์ดังกล่าวไปยัง TypeScript ได้ ขอแนะนำอย่างยิ่งให้คุณสร้างจุดตรวจสอบคอมไพล์หรือข้อมูลสำรองอื่นๆ ก่อนเริ่มต้น

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