vue ts 设置tslint提示_VUE 集成TypeScript之初步踩坑 (一)

最新推荐文章于 2024-08-13 08:03:19 发布

weixin_39854440

最新推荐文章于 2024-08-13 08:03:19 发布

阅读量1.8k

点赞数

文章标签： vue ts 设置tslint提示

为什么要集成TypeScript开发

现在2019年了，TypeScript越来越火，因为更多的人认识到了TypeScript的好处，一直写一直爽。

那用TypeScript开发项目后的优点在哪里尼？

减少bug
降低维护成本
接口可读性好
提高程序员的抽象能力

这些理由，应该有很多人会反对，大家都认为用js写项目，一样也可以实现上述理由，其他人做不到那是写的人不行，这个认知，我大部分也赞成，但是我们需要考虑现状。

一个人要保证每时每刻写的代码都很优质，其实很难的，比如说项目工期很赶，心情不好，这个时候写的代码也许过了三个月后，你自己都不认识了。
利用一些强规定或者规范，约束大家不要写垃圾代码，比如说限定代码的行数、一个函数的深度、多写注释、多写文档、加强review，前两项也许可以通过工具做到，后面的就需要花费比较多的人力，写代码的人累，review代码的人也累，到最后可能又回到了原点。
一个快速成型的团队，或者跨部门合作时，每个人每个团队都有自己的一套规范或者思想，这个时候沟通成本比较大，如果一起开发项目，是很难保证项目的健壮性的，特别是js写的代码，自由度非常高，非常考验一个人的水平。

这就是大部分团队的现状，项目越大，后期维护成本就越高，那为啥TypeScript可以降低这些问题发生的概率，或者缩小问题的规模尼。

TypeScript的优点

支持强类型，有默认的类型检查，光这个就可以减少很多不必要的bug，比如语法错误、类型转换错误，写的代码更安全了。
泛型支持，有了泛型，我们写共通代码时，很轻松的就可以知道对方需要什么，既不用看文档，也不需要问对方，很方便
更好的和后端对接，现在后端一般都有一套接口定义规范，用专门的IDL语言来设计，前端按照这些规范生成相应的api调用代码，如果是生成的js代码，那很明显不能完整的描述后端的强类型定义，TypeScript可以很好的做到这一点
一旦用了TypeScript，就意味你提供的接口，必须要给出明确的类型定义，在这种情况下，需要更多主动的思考，时间长了，抽象能力自然而然就提高了。当如也可以用any，但是如果都用any，那干脆还是用js好了，用啥tsni

如何集成？

如果项目是全新的，有两种方式：一种是vue官方的教程，所有的配置都是基于vue-cli全家桶来做的，开箱就能用；一种是微软出的教程，适合工程化有一定定制需求的团队。

以下是vue官方的教程

用【vue ui】命令时就创建项目，可以直接选TypeScript。

vue ui

用【vue create my-project-name 】创建时命令行选择

vue create my-project-name

vue官方教程 https://cn.vuejs.org/v2/guide/typescript.html

目前公司用的vue-cli搭建的项目，工程化文件都是vue默认提供的，微软的就不介绍了，有兴趣的可以去看看

微软官方vue+ts教程： https://github.com/Microsoft/TypeScript-Vue-Starter#typescript-vue-starter

如果项目已经存在，需要额外添加TypeScript的支持，vue官方也提供了支持，https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript

vue add typescript

这个命令会自动把js项目转换成ts，自动为项目的package.json，加上相关的的依赖

package.json

记得把vue-class-component、vue-property-decorator升级下，默认的版本有点低

"vue-class-component"

升级完，建议修改下vue.config.js的配置

const

这是为了更好读取src下的目录，虽然vue.config.js 提供了src默认的alias => @，但是vue升级到vue3.0,在vs-code下，找组件关系依赖时，用@时，不是很方便，这是之前写react时碰到的坑吧。

踩过的坑

1. Property 'store' does not exist on type 'VueConstructor<Vue>'

因为在VueConstructor下是没有定义store这个属性，所以导致了这个错误

// main.ts

既然知道了原因，那么修改下全局的VueConstructor这个就好了

// shims-vue.d.ts

再次编译，发现已经没有问题了。

2. 已有的项目做lint时报错

如果是全新的项目按照官方生成的应该是没有问题，但是已有的项目，因为历史原因应该有很多lint规则和已有的lint规则不一致，导致报错，要一个个修改也是麻烦，而且有些是没有办法立马修改的，比如说下面这种

<!--

还有就是一些历史的js共通函数，这些都可能过不了新的lint规则，要一个个修正也麻烦，那怎么解决尼？

有三种方式

修改lint的规则，或者修改文件，一个个修改，看项目的复杂度，越古老的项目时间人力成本越大，可行性比较低
直接废弃@typescript-eslint/parser，沿用默认的lint规则，或者重新制定规则，这个如果对于lint规则比较熟悉的人，问题应该不大，不熟悉的就算了
对已有的lint规则适配范围进行修正，把规则限定在vue内，ts、tsx的用tslint做，目前我们的lint规则是针对公司已有的业务进行的定制，所以这一种方法比较适合我们。（eslint、tslint、stylelint我们定制了自己的库）

直接上代码

// .eslintrc

3. IDE无法识别 import('xxx.vue')

具体错误我们看图

IDE报错

在run server时，控制台也会报错

控制台报错

虽然控制台和IDE都报错了，但是这个并不影响页面的开发，只不过一堆的错误，放在控制台肯定不好看，Google了下发现也没有特别好的解决方案，vue官方有一个issue，用// @ts-ignore 标识符忽略掉，只不过这个标识符每次只能忽略一行，如果在router组件内，有一堆的import，就很麻烦了。

@ts-ignore

vue官方issue： Typescript: IDE reports TS2307: Cannot find module error for Vue components imports

顺着TypeScript的@ts-ignore线索，看看能不能一次性写一个标识符，比如下面这样

看着是不是很机智，哈哈，这是一个还在讨论的issue，上面都是issue的建议，大家有时间去可以跟下帖子，蛮有意思的。

TypeScript 官方issue： @ts-ignore for the block scope and imports

第一篇分享就到这。

有兴趣的可以继续往下看

VUE 集成TypeScript之vue-router重构 (二)