將 TypeScript 用於雲端函數

對於喜歡用 TypeScript 編寫函數的開發人員,Cloud Functions 提供兩種類型的支援:

  • 建立和配置 TypeScript 專案以在初始化時自動轉譯( firebase init functions )。
  • 在部署時透過預先部署掛鉤將現有 TypeScript 原始碼轉換為 JavaScript。

按照本指南中的說明,您可以將現有 JavaScript 專案遷移到 TypeScript,並使用預部署掛鉤繼續部署函數來轉譯原始程式碼。在編寫函數時,TypeScript 比普通 JavaScript 具有許多優點:

  • TypeScript 支援最新的 JavaScript 功能,例如 async/await,簡化了 Promise 管理
  • 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

如果您有一個使用 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 函數,您可以使用本機運行函數中所述的模擬工具。在使用這些工具之前編譯程式碼非常重要,因此請確保在運行firebase emulators:startfirebase functions:shell之前在函數目錄中運行npm run build 。或者,運行npm run servenpm run shell作為快捷方式;這些命令都運行建置和服務/啟動功能 shell。

TypeScript 專案的函數日誌

firebase deploy期間,專案的index.ts會轉換為index.js ,這表示 Cloud Functions 日誌將輸出index.js檔案中的行號,而不是您寫的程式碼。為了讓您更輕鬆地在index.ts中找到對應的路徑和行號, firebase deploy創建了functions/lib/index.js.map 。您可以在您喜歡的 IDE 中或透過節點模組使用此來源對應。