在 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。這項工具提供建構應用程式的選項 產生專案清單選擇「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。您可以使用這個來源 搭配節點模組使用。