Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

將 TypeScript 用於 Cloud Functions 函數

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

  • 創建和配置打字稿項目在初始化時自動transpilation( firebase init functions )。
  • Transpile通過現有的打字稿源的JavaScript在部署時預先部署掛鉤

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

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

如果你是新來的打字稿,看到打字稿在5分鐘內

使用 TypeScript 初始化新的 Cloud Functions 項目

運行firebase init functions在一個新的目錄。該工具為您提供了使用 JavaScript 或 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文件和火力地堡項目,你需要做以下修改您的火力地堡的配置:

  1. 編輯package.json添加一個bash腳本來構建你的打字稿項目。例如:

     {
       "name": "functions",
       "scripts": {
         "build": "npm run lint && tsc"
       }
     ...
    
  2. 編輯firebase.json添加預先部署鉤來運行構建腳本。例如:

     {
       "functions": {
         "predeploy": "npm --prefix functions run build",
       }
     }
    

有了這個配置, firebase deploy --only functions命令構建您的打字稿代碼,並部署它的功能。

將現有的 JavaScript 項目遷移到 TypeScript

如果您有使用 JavaScript 初始化和開發的現有 Cloud Functions 項目,則可以將其遷移到 TypeScript。強烈建議您在開始之前創建 git 檢查點或其他備份。

要遷移現有的 JavaScript Cloud Functions 項目:

  1. 創建一個 git 檢查點並保存現有 JavaScript 源文件的副本。
  2. 在項目目錄,運行firebase init functions ,並選擇TypeScript提示為書寫功能的語言時。
  3. 當提示是否覆蓋現有package.json文件,選擇,除非你確信你不想保留現有的文件。
  4. 刪除index.ts目錄functions/src ,與現有的源代碼替換它。
  5. tsconfig.json在初始化時創建的文件,設置編譯器選項,允許JavaScript的: "allowJs": true
  6. 您保存的副本package.json文件到functions目錄中,並修改其設置"main""lib/index.js"
  7. 此外,在package.json ,添加構建腳本打字稿像下面這樣:

     {
       "name": "functions",
       "scripts": {
         "build": "npm run lint && tsc"
       }
     ...
    
  8. 添加"typescript"通過運行一個dev的依賴npm install --save-dev typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser

  9. 對於所有的依賴關係,運行npm install --save @types/<dependency>

  10. 根據需要將源代碼從 .js 重寫為 .ts。

模擬 TypeScript 函數

為了測試打字稿本地功能,您可以使用所描述的仿真工具運行功能在本地。它使用這些工具之前,編譯代碼,所以一定要運行是非常重要的npm run build運行之前,你的功能目錄內firebase emulators:startfirebase functions:shell 。或者,運行npm run servenpm run shell作為快捷方式;這些命令都運行構建和服務/啟動函數外殼。

TypeScript 項目的函數日誌

firebase deploy ,項目的index.ts被transpiled到index.js ,這意味著雲功能從日誌將輸出線號index.js文件,而不是你寫的代碼。為了讓您更容易找到相應的路徑和行號index.tsfirebase deploy創建functions/lib/index.js.map 。您可以在您的首選IDE或通過使用源地圖節點模塊