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

由于 TypeScript 强类型检查、编辑器 IntelliSense 等功能，一旦习惯后，就不再愿意回到动态语言 JavaScript 的世界。

小程序框架 Wepy 1.7.x 虽然能支持 TypeScript，但有挺多坑，故记录之。

1. 编译

使用 wepy-compiler-typescript 编译*.ts文件, 并在wepy.config.js 中配置:

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

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 miniprogram-api-typings@2.4.1

由于小程序 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

4.编辑器/IDE 支持

在编辑器/IDE 中配置普通的 typescript 工程的支持(比如安装插件)，编辑器/IDE 即可获得:

• 自动调用 tslint 检测正在编辑的文件
• 智能的属性/方法补全

5. 使用场景

以上的配置，适合在 wepy 组件之外使用 typescript, 比如工具函数.

在 wepy 1.7.x 上似乎没法深度支持 typescript, 未能让 typescript 深度支持 wepy 组件。

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