Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

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

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

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

ทำตามคำแนะนำในคู่มือนี้ คุณสามารถโยกย้ายโปรเจ็กต์ 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

เมื่อเริ่มต้นเสร็จสมบูรณ์ uncomment ตัวอย่างใน index.ts และเรียกใช้ npm run serve ที่จะเห็น "Hello World" ฟังก์ชั่นในการดำเนินการ

การใช้โปรเจ็กต์ TypeScript ที่มีอยู่

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

  1. แก้ไข package.json เพื่อเพิ่มสคริปต์ทุบตีเพื่อสร้างโครงการ typescript ของคุณ ตัวอย่างเช่น:

     {
       "name": "functions",
       "scripts": {
         "build": "npm run lint && tsc"
       }
     ...
    
  2. แก้ไข firebase.json เพื่อเพิ่มเบ็ด 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" เป็นพึ่งพา 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 เป็น transpiled เพื่อ index.js หมายความว่าฟังก์ชั่นคลาวด์เข้าสู่ระบบพระทัยหมายเลขบรรทัดเอาท์พุทจาก index.js ไฟล์และไม่ได้รหัสที่คุณเขียน ที่จะทำให้มันง่ายขึ้นสำหรับคุณที่จะหาเส้นทางที่สอดคล้องกันและหมายเลขบรรทัดใน index.ts , firebase deploy สร้าง functions/lib/index.js.map คุณสามารถใช้แผนที่แหล่งนี้ใน IDE ที่คุณต้องการหรือผ่านทาง โมดูลโหนด