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进行类型保护,还是很舒服的,关于这个库的具体教程网上已经够多了,我不再赘述。

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

评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值