Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

將 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 中或通過節點模塊使用此源映射。

,

對於喜歡使用 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 中或通過節點模塊使用此源映射。