對於喜歡在 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 配置進行以下修改:
編輯
package.json
以添加 bash 腳本來構建您的 TypeScript 項目。例如:{ "name": "functions", "scripts": { "build": "npm run lint && tsc" } ...
編輯
firebase.json
以添加預部署掛鉤以運行構建腳本。例如:{ "functions": { "predeploy": "npm --prefix functions run build", } }
使用此配置, firebase deploy --only functions
命令構建您的 TypeScript 代碼並將其部署為函數。
將現有的 JavaScript 項目遷移到 TypeScript
如果您有一個用 JavaScript 初始化和開發的現有 Cloud Functions 項目,則可以將其遷移到 TypeScript。強烈建議您在開始之前創建一個 git 檢查點或其他備份。
要遷移現有的 JavaScript Cloud Functions 項目:
- 創建一個 git 檢查點並保存現有 JavaScript 源文件的副本。
- 在項目目錄中,運行
firebase init functions
並在提示輸入函數編寫語言時選擇TypeScript
。 - 當系統提示是否覆蓋現有的
package.json
文件時,請選擇否,除非您確定不想保留現有文件。 - 刪除目錄
functions/src
中的index.ts
,將其替換為您現有的源代碼。 - 在初始化時創建的
tsconfig.json
文件中,將編譯器選項設置為允許 JavaScript:"allowJs": true
。 - 將保存的
package.json
文件複製到functions
目錄,並編輯它以將"main"
設置為"lib/index.js"
。 同樣在
package.json
中,為 TypeScript 添加一個構建腳本,如下所示:{ "name": "functions", "scripts": { "build": "npm run lint && tsc" } ...
通過運行
npm install --save-dev typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser
添加"typescript"
作為開發依賴。對於所有依賴項,運行
npm install --save @types/<dependency>
。根據需要將源代碼從 .js 重寫為 .ts。
模擬 TypeScript 函數
要在本地測試 TypeScript 函數,您可以使用在本地運行函數中描述的仿真工具。在使用這些工具之前編譯您的代碼很重要,因此請確保在運行firebase emulators:start
或firebase functions:shell
之前在您的函數目錄中運行npm run build
。或者,運行npm run serve
或npm run shell
作為快捷方式;這些命令都運行構建和服務/啟動函數 shell。
TypeScript 項目的函數日誌
在firebase deploy
期間,您項目的index.ts
被轉換為index.js
,這意味著 Cloud Functions 日誌將從index.js
文件輸出行號,而不是您編寫的代碼。為了方便您在index.ts
中找到對應的路徑和行號, firebase deploy
創建了functions/lib/index.js.map
。您可以在首選 IDE 中或通過節點模塊使用此源映射。