如果開發人員偏好使用 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 設定進行以下修改:
編輯
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
如果您有現有的 Cloud Functions 專案,且已在 JavaScript 中完成初始化和開發,則可以將該專案遷移至 TypeScript。我們強烈建議您建立 Git 檢查點或其他 備份。
如何遷移現有的 JavaScript Cloud Functions 專案:
- 建立 Git 檢查點,並儲存現有 JavaScript 來源檔案的副本。
- 在專案目錄中,當系統提示您輸入函式的語言時,執行
firebase init functions
並選取TypeScript
。 - 當系統詢問是否要覆寫現有的
package.json
檔案時,除非您確定不想保留現有的檔案,否則請選取「No」。 - 刪除
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 函式,您可以使用「在本機執行函式」一文中所述的模擬工具。請務必
使用這些工具前必須編譯程式碼,因此請務必執行 npm run build
,接著執行 firebase emulators:start
,或
firebase functions:shell
。或者,執行 npm run serve
或
npm run shell
做為快速鍵;這些指令都會執行
提供/啟動函式殼層。
TypeScript 專案的函式記錄檔
在 firebase deploy
期間,您的專案 index.ts
會轉譯為 index.js
,這表示 Cloud Functions 記錄會輸出 index.js
檔案中的行號,而非您編寫的程式碼。為方便您找出
index.ts
中的對應路徑和行數,
firebase deploy
會建立 functions/lib/index.js.map
。您可以在偏好的 IDE 中使用這個來源對應表,也可以透過節點模組使用。