如果開發人員偏好使用 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
。這項工具提供建構應用程式的選項
產生專案清單選擇「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
。您可以使用這個來源
搭配節點模組使用。