針對 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 中或透過節點模組使用這個來源對應。