在 Cloud Functions 中使用 TypeScript

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

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

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

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

如果您是 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 檔案時，除非您確定不想保留現有的檔案，否則請選取「No」。
  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 中使用這個來源對應表，也可以透過節點模組使用。