對於喜歡用 TypeScript 編寫函數的開發人員,Cloud Functions 提供兩種類型的支援:
- 建立和配置 TypeScript 專案以在初始化時自動轉譯(
firebase init functions
)。 - 在部署時透過預先部署掛鉤將現有 TypeScript 原始碼轉換為 JavaScript。
按照本指南中的說明,您可以將現有 JavaScript 專案遷移到 TypeScript,並使用預部署掛鉤繼續部署函數來轉譯原始程式碼。在編寫函數時,TypeScript 比普通 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 中或透過節點模組使用此來源對應。