文章预览
学以致用,这篇文章是对在 vue-cli 中使用 TypeScript 的一次小结。
npm
webpack.base.conf.js
创建一个 .d.ts 文件让 TypeScript 识别 .vue 文件,在此项目中,我放到了 src/typings 文件夹下:
根目录下添加 tsconfig.json 配置文件,配置参数参考: https://zhongsp.gitb... ,项目内有一份配置,就不贴出来了。
很遗憾,如果你使用 TypeScript,在vue-cli(2.9.1) 里并不能使用 ESlint 校验 .vue 文件了,很常见的一个报错:
在 .vue 文件内,并不识别 .d.ts 声明文件内的类型。
ESlint 不能用,TSlint 怎么样?
折腾了一会,在 .vue 文件内也有坑(可能是功力不够),最后决定先放弃。
webpack.base.conf.js
由于在 Vue 中使用 TypeScript 还不是很普及,大部分插件都缺少声明文件:
此时必须添加新声明。
不过还好, Vue , Vue Router , Vuex , Element ,都提供了相应的声明文件。
当然,首先要让 webpack 识别为 TypeScript 而不是 JavaScript,在 script 标签上加上 lang="ts":
有个官方维护的插件 vue-class-component ,可以写成下面方式:
更多的实例可以看 https://github.com/v... 。
此外,还有另一个基于 vue-class-component 的 vue-property-decorat... 插件,提供了如 Watch、Prop、Emit
等修饰器,于是可以写成下面方式:
Vue Router 的修改比较容易,在 router/index.ts 内为变量添加相应 interface 即可:
如果你想组件内使用 Vue Router 导航钩子,你必须注册一次:
其他插件提供的钩子,也可以这么使用。
必须在使用之前注册,我把它放到了 main.ts 里。
Vuex 修改相对麻烦一点。
一个简单的栗子
如果你想在组件里面使用 vuex 的辅助函数,可以使用这个插件 vuex-class 。由于我不习惯使用辅助函数,这里也就不再赘述了。
这里有完整的代码: https://github.com/j...
完。
………………………………