小程序結合TypeScript開發，如果用第三方框架，首選Taro已完美支持。但是如果你選擇原生開發，那么下面的這份實踐可能會幫到你。

小程序 Typescript 最佳實踐

• 使用 gulp 構建（支持 typescript 和 less/sass/scss）

• 使用 typescript 編譯

• 使用 tslint + prettier 格式代碼規范

• 使用小程序官方 typing 庫

• 使用小程序?weui 組件庫^[1]

• 使用了?conventional-changelog^[2]?方案自動生成 CHANGELOG

封裝了以下的能力

相關能力說明

watch behavior	使用參考?watch-behavior[3]
日志能力	封裝了 LogManager 和實時日志的能力 ，參考地址[4]
autolog behavior	配合日志能力，自動在 Component 中每一個方法調用的時候打印 log，參考地址[5]
globalData behavior	只需要在 Component 中引入 GlobalData，則可以使用全局狀態的能力，參考地址[6]
頁面跳轉庫	解決了帶參數、鎖住原跳轉頁面等問題，參考地址[7]
pageparams behavior	配合頁面跳轉庫的跳轉參數使用，如果使用 pageParams 來跳轉傳參，使用該 behavior 可以自動更新到 data 中
request 通用請求庫	處理包括 session 過期自動拉取登錄接口續期等邏輯
promisify 工具庫	將類似于 wx.request 等函數轉化為 Promise 調用方式

掃碼可以簡單體驗下 DEMO：

安裝使用

#?安裝依賴 npm?install#?全局安裝依賴 npm?install?gulp?prettier?typescript?commitizen?--global#?需要在小程序開發工具里【工具】-【構建npm】#?啟動代碼 npm?run?dev#?打包代碼 npm?run?build

基本環境說明

husky

如果不希望在 git commit 的時候檢查 commit 的規范，請在package.json文件中刪掉"commit-msg"相關內容。

如果不希望在 git commit 的時候檢查代碼規范，請在package.json文件中刪掉"pre-commit"相關內容。

{"husky":?{"hooks":?{"pre-commit":?"pretty-quick?--staged","commit-msg":?"commitlint?-E?HUSKY_GIT_PARAMS"}} }

commit 規范

git commit 的 message 遵循?Angular 規范^[8]：

<commit 類型，不可省略>(<功能模塊，可省略>): <功能內容，不可省略> // 空一行 <詳細內容，可省略> // 空一行 <關閉Issue，此處可省略>

commit 類型包括：

• feat：新功能（feature）

• fix：修補 bug

• docs：文檔（documentation）

• style：格式（不影響代碼運行的變動）

• refactor：重構（即不是新增功能，也不是修改 bug 的代碼變動）

• test：增加測試

• chore：構建過程或輔助工具的變動

如果 commit 類型為feat和fix，則該 commit 將現在 CHANGELOG.md 之中。

該項目更多使用方式參考前端 CHANGELOG 生成指南^[9]。

項目結構

├─dist??????????????????????????????//編譯之后的項目文件（帶?sorcemap，支持生產環境告警定位） ├─src???????????????????????????????//開發目錄 │??│??app.ts????????????????????????//小程序起始文件 │??│??app.json │??│??app.less │??│ │??├─assets??????????????????????//靜態資源 │?????├─less??????//公共less │?????├─img??????????//圖片資源 │??├─behaviors?????????????????????//通用behaviors │??├─components?????????????????????//組件 │??├─utils???????????????????????????//工具庫 │??├─config???????????????????????????//配置文檔 │?????├─cgi-config.ts????????????????//cgi接口配置 │?????├─global-config.ts????????????????//全局配置 │??├─pages??????????????????????????//小程序相關頁面 │ │??project.config.json??????????????//小程序配置文件 │??gulpfile.js??????????????????????//工具配置 │??package.json?????????????????????//項目配置 │??README.md????????????????????????//項目說明 │??tsconfig.json?????????????????????//typescript配置 │??tslint.json?????????????????????//代碼風格配置

公共庫使用說明

utils/request

通用請求，處理包括 session 過期自動拉取登錄接口續期等邏輯。（適用于有單個登錄接口來獲取 session 的場景） 使用方式：

在config/global-config.ts文件里，更新SESSION_KEY的值（后臺接口協議返回 key，例如"sessionId"）。

如果有其他需要全局攜帶的參數，需要在utils/request/index.ts文件里，dataWithSession中帶上。

在config/global-config.ts文件里，更新LOGIN_FAIL_CODES的值（錯誤碼若為該數組中的一個，則會重新拉起登錄，再繼續發起請求）。

參考資料

[1]?

weui 組件庫:?https://developers.weixin.qq.com/miniprogram/dev/extended/weui/

[2]?

conventional-changelog:?https://github.com/conventional-changelog/conventional-changelog

[3]?

watch-behavior:?https://github.com/godbasin/watch-behavior

[4]?

參考地址:?https://godbasin.github.io/2019/12/07/wxapp-logs/

[5]?

參考地址:?https://godbasin.github.io/2019/12/07/wxapp-logs/

[6]?

參考地址:?https://godbasin.github.io/2019/11/09/wxapp-global-data-behavior/

[7]?

參考地址:?https://godbasin.github.io/2019/12/08/wxapp-navigate/

[8]?

Angular 規范:?https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit#heading=h.greljkmo14y0

[9]?

前端 CHANGELOG 生成指南:?https://godbasin.github.io/2019/11/10/change-log/

???????????????? ?END ?????????????????

太空編程

分享硬核的編程知識

分享精彩，碼上快樂。JavaScript已然上天，有朝一日實現太空編程！回復【pdf】更有海量的優質電子書供下載。

總結

以上是生活随笔為你收集整理的小程序 Typescript 最佳实践的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。