Vue(2.x)老项目由js转换ts指南
其实在网上有不少关于,vue迁入ts的教程,但是很多并不完善,故做此篇
本项目基于vue-admin-template
进行改造 ,它是有ts版本的,因此本文章讨论的是老项目,由vue-cli构建的迁移
如果你的项目是由vue-cli构建的那么转换项目并不需要手动去添加各种配置文件等,因为vue-cli有内置的ts迁入命令进入项目vue add typescript
如果使用git管理代码,请先保证工作区clear,输入完命令后,终端会自动为你安装@vue/cli-plugin-typescript
安装完成之后会有几个选项要选择
use class-style component syntax?(Y/n)# 意思是是否使用class风格的vue组件,即原本组件时 app=new Vue() 变成 class app extends vue#之后会解释,一般选y即可use babel alongside typescript(required for modern mode,auto-detected polfills,transpiling)?(Y/n)#是否选用babel来自动填充转义,一般情况下也是yConvert all .js files to .ts?(Y/n)# 是否要把所有js文件转换成ts文件,这里最好选n,因为它自动转换虽然很便捷,但是会替换掉一些你原有的内容,而且一个项目想要完全转换成ts并不是改后缀就结束了allow .js files to be compiled?(Y/n)#是否允许.js文件的编译,这里肯定是Y,如果你的项目比较庞杂,你的项目会在很长一段时间内,处于ts,js共存状态skip type checking of all decaration file?(Y/n)# 是否跳过所有类型检查,这里看需求,都可以后面可以更改,一般选Y
经过上面的几个选项,vue-cli就开始转换ts了,视运行速度而定,时间各有差异,运行完之后,会提示
Successfully invoked generator for plugin:@vue/cli-plugin-typescript
看到这个提示你的项目已经转换好了
再进项目看看
如果你使用的是git管理代码,那你应该能够看到有很多的文件改变,却基本没有什么变化,注意,新增了shims-tsx.d.ts shims-vue.d.ts
这两个文件是用于注入模块使ts认识.vue 和.tsx 的,在vue中.tsx使用的可能比较少,不用管,还有一个变化是main.js 会被转换成 main.ts 到那里面的内容不会变化
还有多了tsconfig,json
这个文件用于配置ts,自行查阅相关文档吧
想要完全使用ts的类型检查,那么以下三个工具库基本不可少
vue-class-component #vue的装饰库的基础vue-property-decorator #vue的装饰器库vuex-module-decorators #vuex的装饰器库
前两个库的教程是不少的,故此处不再赘述
可以参考vue-typescript-admin
,里面涵盖了大部分的用法
主要讲讲vuex-module-decorators
,其实vuex的装饰器库有两个选择, 一个是vuex-module-decorators
另一个是vuex-class
,一番比较之下还是选择了vuex-module-decorators
是因为vuex-class
已经许久未见维护是因为确实我个人认为vuex-module-decorators
的语法更胜一筹
其实这两个库的bug的还挺多
但是vuex-module-decorators
用的多,那就说vuex-module-decorators
的
在vuex-module-decorators
中使用动态构建模块,那么就不能使用getters,因为值会为空,并且,如果没有使用动态构建那就不能使用getModule来进行类型保护(其实,当我尝试很久之后发现了这个bug,就觉得我费劲心思把vuex转换成这样完全是白费!因为这个库最大的特点就是可以利用ts的类型保护)如果使用命名空间就不要起名字就是@Module({})中不要传入name属性,不然就会报错
其实这个库的bug还很多,如果不使用公共getters的话利用它的动态构建,然后使用getModule进行类型保护,还是很舒服的,关于这个库的具体教程网上已经够多了,我不再赘述。
以上仅个人经验所谈,如有错误,欢迎指正: )