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

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

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

Vue老项目由js转换ts指南相关推荐

vue老项目升级vue-cli3.0问题总结
升级步骤 1. 删除原vue-cli并安装vue-cli3.0 2.删除新项目中src下的内容,把原项目中src目录覆盖到新项目中 3.把router从目录文件夹改为文件,src/router/ind ...
Vue小项目Mock.js的学习
前后端分离项目前后端约定好API接口&数据&参数前后端并行开发,前端工程师只需要编写HTM页面,通过HTTP请求调用后端提供的接口服务即可.后端只要愉快的开发接口就行了.无强依赖, ...
Vue.js新手入门指南
最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...
Typescript助力项目开发：JS切换TS、TS类型定制与思考
TS已经成为可以帮助项目顺利开发的存在了.在上半年笔者就被要求采用TS开发新的项目,并在一些老项目中用TS去改造(因为沟通原因我以为某个远程组件只有TS版本).在其中也有了一些思考. 首先是目录结构. ...
分享：Vue.js新手入门指南-0518-v1.0张雅慧（续）
11.我在学习Vue.js的时候老是听到Webpack,这是啥? Webpack是一个前端打包和构建工具.如果你之前一直是手写HTML,CSS,JavaScript,并且通过link标签将CSS引入你 ...
js 升级 ts 之路，含 vue 升级攻略
原文地址: https://www.jeremyjone.com/724/, 转载请注明. 最近在升级项目,用到了TypeScript,简单总结一下JS转TS,尤其是在vue中的使用方式. 基础语法 ...
TypeScript入门指南：从JS到TS的转变
文章目录引言为什么需要使用 TypeScript? 简单认识一下 TypeScript 的基础语法 1. 类型注解 2. 接口 3. 类 4. 泛型 5. 枚举从JS到TS的转变策略总结引言 ...
vue导入非es6 js文件_Vue项目兼容IE11
Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性.但对于 IE9+,Vue 底层是支持. 由于开发过程中,我们经常会使用一些第三方插件或组件 ...
js和ts两种将小写金额转中文大写汉字，阿拉伯数字金额格式化成中文大写汉字，数字金额转换成财务发票大写中文
通过 npm i money2cn 安装支持typescript 使用: import money2cn from 'money2cn' const nums = money2cn(23423 ...

Vue老项目由js转换ts指南

Vue（2.x）老项目由js转换ts指南

本项目基于 `vue-admin-template`进行改造，它是有ts版本的，因此本文章讨论的是老项目，由vue-cli构建的迁移

Vue老项目由js转换ts指南相关推荐

最新文章

热门文章

Vue老项目由js转换ts指南

Vue（2.x）老项目由js转换ts指南

本项目基于 vue-admin-template进行改造 ，它是有ts版本的，因此本文章讨论的是老项目，由vue-cli构建的迁移

Vue老项目由js转换ts指南相关推荐

最新文章

热门文章

本项目基于 `vue-admin-template`进行改造，它是有ts版本的，因此本文章讨论的是老项目，由vue-cli构建的迁移