在 Cloud Functions 中使用 TypeScript

如果開發人員偏好以 TypeScript 編寫函式,Cloud Functions 提供兩種支援:

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

按照本指南的說明,您可以將現有的 JavaScript 專案遷移至 TypeScript,並繼續使用前置部署掛鉤轉譯原始碼,藉此部署函式。與純 JavaScript 相比,TypeScript 在編寫函式時有許多優勢:

  • TypeScript 支援最新的 JavaScript 功能 (例如 async/await),可簡化 Promise 管理作業
  • 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,新增用來建構 TypeScript 專案的 Bash 指令碼。例如:

     {
       "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

如果您有以 JavaScript 初始化及開發的現有 Cloud Functions 專案,可以將其遷移至 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:startfirebase functions:shell。或者,您也可以執行 npm run servenpm run shell 做為捷徑;這兩個指令都會執行建構作業,並提供/啟動函式殼層。

TypeScript 專案的函式記錄

firebase deploy 期間,專案的 index.ts 會轉譯為 index.js,這表示 Cloud Functions 記錄會輸出 index.js 檔案的行號,而不是您編寫的程式碼。為了方便您在 index.ts 中找出對應的路徑和行號,firebase deploy 會建立 functions/lib/index.js.map。您可以在偏好的 IDE 中使用這個來源對應,也可以透過 Node.js 模組使用。