สำหรับนักพัฒนาแอปที่ต้องการเขียนฟังก์ชันใน TypeScript Cloud Functions มีการรองรับ 2 ประเภท ได้แก่
- สร้างและกำหนดค่าโปรเจ็กต์ TypeScript เพื่อการแปลงอัตโนมัติเมื่อเริ่มต้น (
firebase init functions
) - แปลงซอร์ส TypeScript ที่มีอยู่เป็น JavaScript ในเวลาที่ทำการติดตั้งใช้งานผ่านฮุก predeploy
เมื่อทำตามวิธีการในคู่มือนี้ คุณจะย้ายข้อมูลโปรเจ็กต์ JavaScript ที่มีอยู่ไปยัง TypeScript และดำเนินการติดตั้งฟังก์ชันต่อไปได้โดยใช้ Hook ก่อนการติดตั้งใช้งานเพื่อแปลงรหัสต้นฉบับ TypeScript มีประโยชน์หลายอย่างเหนือกว่า JavaScript แบบดั้งเดิม เมื่อเขียนฟังก์ชัน
- TypeScript รองรับฟีเจอร์ JavaScript ล่าสุด เช่น async/await ซึ่งช่วยลดความซับซ้อนในการจัดการ Promise
- 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 อยู่แล้ว คุณสามารถเพิ่มฮุก predeploy เพื่อให้มั่นใจว่าโปรเจ็กต์จะได้รับการแปลงทุกครั้งที่คุณนำโค้ดไปใช้งานใน Cloud Functions for Firebase คุณจะต้องมีไฟล์ tsconfig.json
ที่มีรูปแบบถูกต้องและโปรเจ็กต์ Firebase รวมถึงต้องทำการแก้ไขการกำหนดค่า Firebase ดังต่อไปนี้
แก้ไข
package.json
เพื่อเพิ่มสคริปต์ Bash สำหรับสร้างโปรเจ็กต์ TypeScript เช่น{ "name": "functions", "scripts": { "build": "npm run lint && tsc" } ...
แก้ไข
firebase.json
เพื่อเพิ่ม Hook ก่อนการติดตั้งใช้งานเพื่อเรียกใช้สคริปต์บิลด์ เช่น{ "functions": { "predeploy": "npm --prefix functions run build", } }
การกำหนดค่านี้จะทำให้firebase deploy --only functions
คำสั่ง
สร้างโค้ด TypeScript และนำไปใช้เป็นฟังก์ชัน
การย้ายข้อมูลโปรเจ็กต์ JavaScript ที่มีอยู่ไปยัง TypeScript
หากมีCloud Functionsโปรเจ็กต์ที่คุณเริ่มต้น และพัฒนาใน JavaScript อยู่แล้ว คุณสามารถย้ายข้อมูลไปยัง TypeScript ได้ เราขอแนะนำให้คุณสร้างจุดตรวจสอบ Git หรือข้อมูลสำรองอื่นๆ ก่อนเริ่มต้น
วิธีย้ายข้อมูลโปรเจ็กต์ JavaScript Cloud Functions ที่มีอยู่
- สร้างจุดตรวจสอบ Git และบันทึกสำเนาของไฟล์ต้นฉบับ JavaScript ที่มีอยู่
- ในไดเรกทอรีโปรเจ็กต์ ให้เรียกใช้
firebase init functions
แล้วเลือกTypeScript
เมื่อระบบแจ้งให้เลือกภาษาสำหรับเขียนฟังก์ชัน - เมื่อระบบแจ้งว่าต้องการเขียนทับไฟล์
package.json
ที่มีอยู่หรือไม่ ให้เลือกไม่ เว้นแต่คุณจะแน่ใจว่าไม่ต้องการเก็บไฟล์ที่มีอยู่ - ลบ
index.ts
ในไดเรกทอรีfunctions/src
แล้วแทนที่ด้วยซอร์สโค้ดที่มีอยู่ - ในไฟล์
tsconfig.json
ที่สร้างขึ้นเมื่อเริ่มต้น ให้ตั้งค่าตัวเลือกคอมไพเลอร์เพื่ออนุญาต JavaScript:"allowJs": true
- คัดลอกไฟล์
package.json
ที่บันทึกไว้ลงในไดเรกทอรีfunctions
แล้วแก้ไขเพื่อตั้งค่า"main"
เป็น"lib/index.js"
นอกจากนี้ ใน
package.json
ให้เพิ่มสคริปต์บิลด์สำหรับ TypeScript ดังนี้{ "name": "functions", "scripts": { "build": "npm run lint && tsc" } ...
เพิ่ม
"typescript"
เป็นการขึ้นต่อกันของ Dev โดยเรียกใช้npm install --save-dev typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser
สำหรับทรัพยากร Dependency ทั้งหมด ให้เรียกใช้
npm install --save @types/<dependency>
เขียนซอร์สโค้ดใหม่จาก .js เป็น .ts ตามต้องการ
การจำลองฟังก์ชัน TypeScript
หากต้องการทดสอบฟังก์ชัน TypeScript ในเครื่อง คุณสามารถใช้เครื่องมือจำลองที่อธิบายไว้ในเรียกใช้ฟังก์ชันในเครื่อง คุณต้อง
คอมไพล์โค้ดก่อนใช้เครื่องมือเหล่านี้ ดังนั้นโปรดตรวจสอบว่าได้เรียกใช้ npm run build
ภายในไดเรกทอรีฟังก์ชันก่อนเรียกใช้ firebase emulators:start
หรือ
firebase functions:shell
หรือจะเรียกใช้ npm run serve
หรือ
npm run shell
เป็นทางลัดก็ได้ โดยทั้ง 2 คำสั่งนี้จะเรียกใช้การสร้างและ
แสดง/เริ่มเชลล์ฟังก์ชัน
บันทึกฟังก์ชันสำหรับโปรเจ็กต์ TypeScript
ในระหว่าง firebase deploy
ระบบจะแปลง index.ts
ของโปรเจ็กต์เป็น index.js
ซึ่งหมายความว่าบันทึกของ Cloud Functions จะแสดงหมายเลขบรรทัดจากไฟล์ index.js
ไม่ใช่โค้ดที่คุณเขียน firebase deploy
จะสร้าง functions/lib/index.js.map
เพื่อให้คุณค้นหาเส้นทางและหมายเลขบรรทัดที่เกี่ยวข้องใน index.ts
ได้ง่ายขึ้น
คุณใช้ Source
Map นี้ใน IDE ที่ต้องการหรือผ่านโมดูล Node ได้