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

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

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

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

• TypeScript รองรับฟีเจอร์ JavaScript ล่าสุด เช่น async/await ซึ่งช่วยให้การจัดการ Promise ง่ายขึ้น
• โปรแกรมตรวจสอบไวยากรณ์ 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 command จะสร้างโค้ด 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 ที่ต้องการหรือผ่านโมดูล Node ก็ได้