获取我们在 Firebase 峰会上发布的所有信息,了解 Firebase 可如何帮助您加快应用开发速度并满怀信心地运行应用。了解详情

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

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

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