Sử dụng TypeScript cho Hàm đám mây

Đối với những nhà phát triển thích viết hàm bằng TypeScript, Cloud Functions cung cấp 2 loại hỗ trợ:

  • Tạo và định cấu hình các dự án TypeScript để tự động chuyển đổi mã nguồn khi khởi chạy (firebase init functions).
  • Chuyển đổi mã nguồn TypeScript hiện có sang JavaScript tại thời điểm triển khai thông qua một hook trước khi triển khai.

Làm theo hướng dẫn trong bài viết này, bạn có thể di chuyển một dự án JavaScript hiện có sang TypeScript và tiếp tục triển khai các hàm bằng cách sử dụng một hook trước khi triển khai để chuyển đổi mã nguồn. TypeScript mang lại nhiều lợi ích hơn so với JavaScript thuần khi viết hàm:

  • TypeScript hỗ trợ các tính năng mới nhất của JavaScript như async/await, giúp đơn giản hoá việc quản lý promise
  • Trình kiểm tra lỗi Cloud Functions làm nổi bật các vấn đề thường gặp trong khi bạn viết mã
  • Tính năng an toàn về kiểu giúp bạn tránh lỗi thời gian chạy trong các hàm đã triển khai

Nếu bạn mới làm quen với TypeScript, hãy xem bài viết TypeScript trong 5 phút.

Khởi chạy một dự án Cloud Functions mới bằng TypeScript

Chạy firebase init functions trong một thư mục mới. Công cụ này cung cấp cho bạn các lựa chọn để xây dựng dự án bằng JavaScript hoặc TypeScript. Chọn TypeScript để xuất cấu trúc dự án sau:

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

Sau khi quá trình khởi chạy hoàn tất, hãy bỏ chú thích mẫu trong index.ts và chạy npm run serve để xem hàm "Hello World" đang hoạt động.

Sử dụng một dự án TypeScript hiện có

Nếu có một dự án TypeScript hiện có, bạn có thể thêm một hook trước khi triển khai để đảm bảo dự án của bạn được chuyển đổi mã nguồn mỗi khi bạn triển khai mã của mình lên Cloud Functions for Firebase. Bạn sẽ cần một tệp tsconfig.json được định dạng đúng cách và một dự án Firebase, đồng thời bạn cần thực hiện các sửa đổi sau đối với cấu hình Firebase:

  1. Chỉnh sửa package.json để thêm một tập lệnh Bash nhằm xây dựng dự án TypeScript. Ví dụ:

     {
   "name": "functions",
   "scripts": {
     "build": "npm run lint && tsc"
   }
 ...

  2. Chỉnh sửa firebase.json để thêm một hook trước khi triển khai nhằm chạy tập lệnh xây dựng. Ví dụ:

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

Với cấu hình này, lệnh firebase deploy --only functions sẽ xây dựng mã TypeScript của bạn và triển khai mã đó dưới dạng các hàm.

Di chuyển một dự án JavaScript hiện có sang TypeScript

Nếu có một dự án Cloud Functions hiện có mà bạn đã khởi chạy và phát triển bằng JavaScript, thì bạn có thể di chuyển dự án đó sang TypeScript. Bạn nên tạo một điểm kiểm tra git hoặc bản sao lưu khác trước khi bắt đầu.

Cách di chuyển một dự án Cloud Functions JavaScript hiện có:

  1. Tạo một điểm kiểm tra git và lưu các bản sao của tệp nguồn JavaScript hiện có.
  2. Trong thư mục dự án, hãy chạy firebase init functions và chọn TypeScript khi được nhắc chọn ngôn ngữ để viết hàm.
  3. Khi được nhắc có ghi đè tệp package.json hiện có hay không, hãy chọn No (Không) trừ phi bạn chắc chắn không muốn giữ lại tệp hiện có.
  4. Xoá index.ts trong thư mục functions/src, thay thế bằng mã nguồn hiện có.
  5. Trong tệp tsconfig.json được tạo khi khởi chạy, hãy đặt các tuỳ chọn trình biên dịch để cho phép JavaScript: "allowJs": true.
  6. Sao chép tệp package.json đã lưu vào thư mục functions rồi chỉnh sửa tệp đó để đặt "main" thành "lib/index.js".

  7. Cũng trong package.json, hãy thêm một tập lệnh xây dựng cho TypeScript như sau:

     {
   "name": "functions",
   "scripts": {
     "build": "npm run lint && tsc"
   }
 ...

  8. Thêm "typescript" làm phần phụ thuộc dành cho nhà phát triển bằng cách chạy npm install --save-dev typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser.

  9. Đối với tất cả các phần phụ thuộc, hãy chạy npm install --save @types/<dependency>.

  10. Viết lại mã nguồn từ .js sang .ts theo ý muốn.

Mô phỏng các hàm TypeScript

Để kiểm thử các hàm TypeScript cục bộ, bạn có thể sử dụng các công cụ mô phỏng được mô tả trong Chạy các hàm cục bộ. Điều quan trọng là bạn phải biên dịch mã trước khi sử dụng các công cụ này, vì vậy, hãy nhớ chạy npm run build bên trong thư mục hàm trước khi chạy firebase emulators:start hoặc firebase functions:shell. Ngoài ra, hãy chạy npm run serve hoặc npm run shell dưới dạng lối tắt; cả hai lệnh này đều chạy bản dựng và phân phát/khởi động shell hàm.

Nhật ký hàm cho các dự án TypeScript

Trong quá trình firebase deploy, index.ts của dự án sẽ được chuyển đổi mã nguồn thành index.js, nghĩa là nhật ký Cloud Functions sẽ xuất số dòng từ tệp index.js chứ không phải mã bạn đã viết. Để giúp bạn dễ dàng tìm thấy các đường dẫn và số dòng tương ứng trong index.ts, firebase deploy sẽ tạo functions/lib/index.js.map. Bạn có thể sử dụng bản đồ nguồn này trong IDE ưa thích hoặc thông qua một mô-đun nút.