Catch up on everything announced at Firebase Summit, and learn how Firebase can help you accelerate app development and run your app with confidence. Learn More

將 TypeScript 用於雲函數

透過集合功能整理內容 你可以依據偏好儲存及分類內容。

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

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

按照本指南中的說明,您可以將現有 JavaScript 項目遷移到 TypeScript,並使用預部署掛鉤繼續部署函數以轉譯源代碼。在編寫函數時,TypeScript 比普通 JavaScript 提供了許多好處:

  • TypeScript 支持最新的 JavaScript 功能,例如 async/await,簡化了 Promise 管理
  • Cloud Functions linter 突出顯示編碼時的常見問題
  • 類型安全可幫助您避免部署函數中的運行時錯誤

如果您是 TypeScript 新手,請參閱TypeScript in 5 minutes

使用 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作為快捷方式;這些命令都運行構建和服務/啟動函數外殼。

TypeScript 項目的函數日誌

在 firebase firebase deploy期間,您的項目的index.ts被轉譯為index.js ,這意味著 Cloud Functions 日誌將輸出index.js文件中的行號,而不是您編寫的代碼。為了讓您更容易在 index.ts 中找到相應的路徑和行號, index.ts firebase deploy會創建functions/lib/index.js.map 。您可以在首選 IDE 中或通過節點模塊使用此源映射。