在 Cloud Functions 中使用 TypeScript

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

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

您可以按照本指南中的操作說明,將現有的 JavaScript 專案遷移至 TypeScript,並繼續使用預先部署掛鉤來轉譯原始碼,以便繼續部署函式。在編寫函式時,TypeScript 比純 JavaScript 提供更多優勢:

  • TypeScript 支援 async/await 等最新的 JavaScript 功能,簡化承諾的管理工作
  • 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

如果您有現有的 Cloud Functions 專案,且已在 JavaScript 中完成初始化和開發,則可以將該專案遷移至 TypeScript。我們強烈建議您建立 Git 檢查點或其他 備份。

如何遷移現有的 JavaScript Cloud Functions 專案:

  1. 建立 Git 檢查點,並儲存現有 JavaScript 來源檔案的副本。
  2. 在專案目錄中,當系統提示您輸入函式的語言時,執行 firebase init functions 並選取 TypeScript
  3. 當系統詢問是否要覆寫現有的 package.json 檔案時,除非您確定不想保留現有的檔案,否則請選取「No」
  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:start,或 firebase 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 中使用這個來源對應表,也可以透過節點模組使用。