Catch up on highlights from Firebase at Google I/O 2023. Learn more

將 TypeScript 用於雲函數

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

  • 創建和配置 TypeScript 項目以在初始化時自動轉換( firebase init functions )。
  • 在部署時通過預部署掛鉤將現有 TypeScript 源代碼轉換為 JavaScript。

按照本指南中的說明,您可以將現有的 JavaScript 項目遷移到 TypeScript,並使用預部署掛鉤繼續部署函數以轉譯您的源代碼。在編寫函數時,TypeScript 比 vanilla 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 中或通過節點模塊使用此源映射。