Vue老项目由js转换ts指南

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来自动填充转义，一般情况下也是y
Convert 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

1. 是因为vuex-class已经许久未见维护
2. 是因为确实我个人认为vuex-module-decorators的语法更胜一筹

其实这两个库的bug的还挺多
但是vuex-module-decorators用的多，那就说vuex-module-decorators的

1. 在vuex-module-decorators中使用动态构建模块，那么就不能使用getters，因为值会为空，并且，如果没有使用动态构建那就不能使用getModule来进行类型保护（其实，当我尝试很久之后发现了这个bug，就觉得我费劲心思把vuex转换成这样完全是白费！因为这个库最大的特点就是可以利用ts的类型保护）
2. 如果使用命名空间就不要起名字就是@Module({})中不要传入name属性，不然就会报错

其实这个库的bug还很多，如果不使用公共getters的话利用它的动态构建，然后使用getModule进行类型保护，还是很舒服的，关于这个库的具体教程网上已经够多了，我不再赘述。

以上仅个人经验所谈，如有错误，欢迎指正: )