在 Cloud Functions 中使用 TypeScript

如果開發人員偏好使用 TypeScript 編寫函式，Cloud Functions 提供兩種支援：

  • 建立及設定 TypeScript 專案，以便在初始化時自動轉譯 (firebase init functions)。
  • 透過預部署掛鉤，在部署期間將現有的 TypeScript 來源轉譯為 JavaScript。

您可以按照本指南中的操作說明，將現有的 JavaScript 專案遷移至 TypeScript，並繼續使用預先部署掛鉤來轉譯原始碼，以便繼續部署函式。在編寫函式時，TypeScript 比純 JavaScript 提供更多優勢：

  • TypeScript 支援最新的 JavaScript 功能，例如 async/await，可簡化承諾管理
  • Cloud Functions 程式碼檢查器會在您編寫程式碼時醒目顯示常見問題
  • 類型安全性有助於避免部署函式中的執行階段錯誤

如果您是 TypeScript 新手，請參閱「5 分鐘搞懂 TypeScript」。

使用 TypeScript 初始化新的 Cloud Functions 專案

在新目錄中執行 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 指令會建構 TypeScript 程式碼，並將其部署為函式。

將現有 JavaScript 專案遷移至 TypeScript

如果您現有的 Cloud Functions 專案是透過 JavaScript 初始化並開發，可將其遷移至 TypeScript。強烈建議您在開始前建立 Git 檢查點或其他備份。

如要遷移現有的 JavaScript Cloud Functions 專案：

  1. 建立 Git 檢查點，並儲存現有 JavaScript 來源檔案的副本。
  2. 在專案目錄中執行 firebase init functions，並在系統提示您選擇用於編寫函式的語言時，選取 TypeScript。
  3. 在系統提示是否覆寫現有 package.json 檔案時，除非您確定不想保留現有檔案，否則請選取「否」。
  4. 刪除 functions/src 目錄中的 index.ts，並以現有的原始碼取代。
  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. 執行 npm install --save-dev typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser，將 "typescript" 新增為開發依附元件。

  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 會轉譯為 index.js，這表示 Cloud Functions 記錄會輸出 index.js 檔案中的行號，而非您編寫的程式碼。為讓您更輕鬆地在 index.ts 中找到對應的路徑和行號，firebase deploy 會建立 functions/lib/index.js.map。您可以在偏好的 IDE 中使用這個來源對應表，也可以透過節點模組使用。