不再头秃!typescript平滑重构vue项目

我刚接手手头这个项目的时候,console里到处飘红,整个项目哪哪都是bug,满目疮痍。经过一段时间的调整,虽然可以正常运行,但是很多问题迟迟没有解决,比如乱七八糟的调用、没有闭合的if else、没有处理的try catch……可以说,为了维护这一个问题多多的项目,牺牲了很多我的头发...以上是牢骚段落。

作为一个深知“懒是第一生产力”的工具人,在烦躁之余,一直在寻找一劳永逸的方法。终于,typescript进入我的视线。有了typescipt,一些基础的问题可以直接在编写、编译时报错,它的好处我也不必多说了。

然而,vue+typescript的做法并不普遍,也有争议,网上也多是老版本的做法,对于vue-cli3+typescript,怎么样平滑地、一天做一点地引入typescript呢?

生产力工具篇

vue add typescript

第一步看官网资料,官网详尽地写了如何配置,不过,对于大多数用vue-cli搭建的项目,其实重点是第一句

就是vue-cli,通过引入 vue-cli-plugin-typescript

插件,很简单,一行代码搞定:

vue add @vue/typescript
复制代码

该插件会帮助配置webpack,引入ts.config,并把js文件转换成ts文件,作为参考,还会同时生成一个ts写法的vue文件。

因为我们需要平滑重构,而不是一下完成所有的事情,所以 Allow .js files to be compiled

选择yes,允许js编译。

vue-js转换为vue-ts

重构最累的一点就是,为了给类型标注,几乎要把之前的所有文件重写一遍,比如:

import Vue from 'vue'
import Component from 'vue-class-component'

// 1.添加修饰符
@Component()
// 2.基于类的vue文件
export default class MyComponent extends Vue {
  // 3.属性标注
  message: string = 'Hello!'
  // 4.方法标注
  onClick (): void {
    window.alert(this.message)
  }
  // 5.其他变化
}
复制代码

这样修改很难吗?不难,但谁会想做个重复劳动百八十回的工具人呢?

解放双手,自动转换:TransVue2Ts

这里特别感谢 @清液 大神的 解放双手-vue语法自动转typescript ,文中提到了转换工具,可以将vue-js的data/computed/prop/watch/mixin等统统转换成vue-ts,我都一一测试过,没有任何问题,强力推荐!:+1::+1::+1:

具体的转换方式和写法都在上文帖子中,我就不赘述了。 有了转换工具,完全可以在需要时再将vue-js转为vue-ts,局部重构。

tslint

我用的是腾讯团队的 tslint-config-alloy ,规则因团队而异,大体按照这套规则。

踩坑篇

引入第三方插件

当在vue中引入第三方的插件时,typescript会无法识别

import '*' as _ from 'lodash'
复制代码

这时可以先尝试添加官方的typescript类型声明 npm install @types/xxx

npm install @types/lodash 
复制代码

像lodash这种,官方是有ts声明文件的,添加后就可以识别了;对于没有声明文件的,则需要在 shime-global.d.ts 文件中声明

declare module 'xxx'
复制代码

data属性无法访问全局属性

解决方案:写在created()钩子中。最常见的例子:

@Component()
export default class Hello extends Vue {
    id:string = this.$route.query.id  // 这样是会报错的
    
    // 改成这样即可
    id:string = ''
    created(){
        this.id = this.$route.query.id
    }
}
复制代码

对象的undefined、null处理

我们经常会遇到这种情况:

let user= {
    name:'小明',
    friends:[
        {name:'小明的朋友'}
    ]
}
alert(user.friends[0].name) // '小明的朋友'
复制代码

当小明不存在(user为null),或者小明没有朋友(friends为null)时,就会报错,解决:

// 方法一
if(user&&user.friends&&user.friends.length>0){
    alert(user.friends[0].name) 
}
// 方法二
alert((((user||{}).friends||[])[0]||{}).name) 
复制代码

要是再多几层,就会更难写难读,所以我推荐方法三:使用 ts-optchain

import { oc } from 'ts-optchain';
alert(oc(user).friends[0].name('这里可以给个默认值'))
复制代码

小结

文章仅是我个人的经验总结,也只是提到了重构中关键性的工具,具体配置以官方为准,如有错漏,欢迎批评指正!

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章