03.06 Wepy 1.7.x 小程序工程配置 TypeScript

由於 TypeScript 強類型檢查、編輯器 IntelliSense 等功能，一旦習慣後，就不再願意回到動態語言 JavaScript 的世界。

小程序框架 Wepy 1.7.x 雖然能支持 TypeScript，但有挺多坑，故記錄之。

1. 編譯

使用 wepy-compiler-typescript 編譯*.ts文件, 並在wepy.config.js 中配置:

<code>    typescript: {
      // 參考 https://github.com/majianguang/WepyTypeScriptDemo/blob/master/wepy.config.js
      // compilerOptions: {
      // module: 'es6',
      // },
    },
/<code>

2. lint

由於 wepy 1.7.x 依賴的是低版本的 eslint, 故無法讓 eslint 支持 typescript, 故使用 tslint 檢測 *.ts 文件

tslint 的相關配置涉及兩個文件:

./tslint.json

tslint 配置

./tsconfig.json

ts 工程的配置

⚠️ 注意: wepy-compiler-typescript 似乎不受該文件配置的影響

3.安裝 types

@types/wepy

Wepy 的 TypeScript 類型定義文件

npm install --save-dev @types/wepy

相關信息見 https://www.npmjs.com/package/@types/wepy

miniprogram-api-typings

微信小程序 API 的 TypeScript 類型定義文件

npm install miniprogram-api-typings

或者通過版本號指定一個基礎庫版本：

npm install [email protected]

由於小程序 API 不同版本有變化，建議指定版本安裝。版本相關信息見 https://github.com/wechat-miniprogram/api-typings/blob/master/VERSIONS.md

@types/wepy-redux

在 wepy 工程中，一般免不了使用 redux/wepy-redux, 如果使用了，可以安裝 wepy-redux 的 TypeScript 類型定義文件

npm install --save-dev @types/wepy-redux

相關信息見 https://www.npmjs.com/package/@types/wepy-redux

在編輯器/IDE 中配置普通的 typescript 工程的支持(比如安裝插件)，編輯器/IDE 即可獲得:

• 自動調用 tslint 檢測正在編輯的文件
• 智能的屬性/方法補全

5. 使用場景

以上的配置，適合在 wepy 組件之外使用 typescript, 比如工具函數.

在 wepy 1.7.x 上似乎沒法深度支持 typescript, 未能讓 typescript 深度支持 wepy 組件。

如何在 wepy 組件中使用 TypeScript, 且看下回分解。

閱讀更多 高原銀杏樹 的文章

關鍵字: 集成開發環境 程序 JavaScript