vue语法自动转typescript(解放双手)

代码的复用是一件很常见的事情，如果是公共代码的复用那还好说，直接做成一个内部私有库，想用的话安装一下 npm包就行了，但是业务代码的复用就不好做成包了，一般都是复制粘贴

成都创新互联公司是一家专注于网站建设、成都网站设计与策划设计,六盘水网站建设哪家好?成都创新互联公司做网站,专注于网站建设十年,网设计领域的专业建站公司;建站业务涵盖:六盘水等地区。六盘水做网站价格咨询:18982081108

我一般写代码的时候，如果觉得某段业务代码以前见过其他人写过，那么考虑到业务优先性，只要别人的代码不是写得太烂，我一般会优先抄别人的代码，省得自己再写一遍

然后我就遇到了一个问题，公司目前前端项目大部分都是 vue，早期没有 ts这个说法，后来新项目才逐渐引入 ts，所以新项目用的是 vue-ts，而一般想抄的老代码都是没有引入 ts的，固然，这二者是可以兼容存在的，但对于有着轻微代码洁癖的我来说，还是不想看到同一个项目代码里掺杂着 ts和非 ts两种写法的，所以只要有时间，我都会尽量手动把老代码转化为 ts规范的
难度倒是没多少，只不过每一份都要手动转一遍，转得多了我忽然陷入沉思，我好像 repeat myself了啊，不太能忍，于是决定写一个自动将 vue-js转成 vue-ts的工具

这个工具的代码已经被我放到 github 上了，并且为了方便使用，我已经将其做成了一个 npm 包，感兴趣的可以亲自试一下

@babel

涉及到 js语法转换的东西，第一时间想到的就是 babel了，babel早就提供了丰富完善的 js语法的解析与反解析工具

@babel/parser

@babel/parser 是负责解析 js语法的工具，可以理解为将 js语法转化为 ast，方便开发者进行自定义处理，通过 plugins来支持多种 js语法，例如 es6、es7、ts、flow、jsx甚至是一些实验室的语法(experimental language proposals)等

例如：

const code = 'const a = 1'
const ast = require("@babel/parser").parse(code)

转换后的 ast就是一个对象，数据结构描述的就是 const a = 1这个表达式

对这个 ast进行遍历，就可以获得所有当前解析的 js语法的信息，自然也能对其进行修改

@babel/generator

有解析就有反解析， @babel/generator用于将@babel/parser解析出的 ast转化回字符串形式的 js代码

const code = 'const a = 1;'
const ast = require("@babel/parser").parse(code)
const codeStr = require('@babel/generator').default(ast).code
code === codeStr // => true

其他

一般 @babel/parser、@babel/generator 和 @babel/traverse会一起出现使用，前两个前面已经介绍过了，至于 @babel/traverse，其主要作用就是对 @babel/parser生成的 ast进行遍历，提供了一些方法，省得开发者自己去做各种判断

不过我这里写的这个程序，因为不需要太过细致的解析，所以没用@babel/traverse这个东西，我按照自己的意愿对 ast进行遍历操作

除此之外，babel还提供了一些其他的工具库啦帮助库啦，一般都不太用得到，想要详细了解的可以自己去看文档

本文下面所说的操作，基本上都是在 @babel/parser 转换后的 ast，以及 @babel/generator 解析后的代码字符串上进行的

props

vue官网对于 props的介绍在props

因此 props的以下几种写法都是符合规范的：

export default {
 props: ['size', 'myMessage'],
 props: {
  a: Number,
  b: [Number, String],
  c: 'defaultValue',
  d: {
   type: [Number, String]
  }
  e: {
   type: Number,
   default: 0,
   required: true,
   validator: function (value) {
    return value >= 0
   }
  }
 }
}

上述转换为 ts对应如下：

export default class YourComponent extends Vue {
 @Prop() readonly size: any | undefined
 @Prop() readonly myMessage: any | undefined
 @Prop({ type: Number }) readonly a: number | undefined
 @Prop([Number, String]) readonly b: number | string | undefined
 @Prop() readonly c!: any
 @Prop({ type: [Number, String] }) readonly d: number | string | undefined
 @Prop({ type: Number, default: 0, required: true, validator: function (value) {
  return value >= 0
 } }) readonly e!: number
}

ok，那就好办了，首先 props值的类型只有 Array 和 对象 这两种类型

数组类型

Array类型很好办，就一个转换模板：

@Prop() readonly propsName: any | undefined

只需要遍历 Array类型的 props，然后，把 propsName替换成真正的值即可

对象类型

对象类型的转化模板在数组类型的模板上，多加了一些字符串，主要就是 @Prop的参数：

@Prop({ type: typeV, default: defaultV, required: requiredV, validator: validatorV }) readonly propsName: typeV

props 这个大对象的每个属性，都是一个 propsName，这个是确定的，然后 propsName对应的值，可能是 type，type 分为单类型(例如 Number)，以及类型数组(例如 [Number, String])；可能是一个对象，这个对象下的属性最少为 0个，最多为 4个，如果这个对象存在一个属性名为 type的属性，则这个属性的值也需要判断单类型和类型数组，其他属性直接取原值即可

无论 props对象的属性值是对象还是 type，都需要处理 type，所以一个专门处理 type的方法 handlerType

如此一来，如果是 type，则 handlerType直接处理好；如果是对象，则遍历这个对象的属性，发现属性是 type，则调用

handlerType进行处理，否则直接原样作为 @Prop的参数即可

data

vue官网对于 data的介绍在data

data的类型可以是 Object 或 Function，即以下几种写法都合法：

export default {
 data: {
  a: 1
 },
 data () {
  return {
   a: 1
  }
 },
 data: function () {
  return {
   a: 1
  }
 }
}

上述转换为 ts对应如下：

export default class YourComponent extends Vue {
 a: number = 1
}

所以这里就很明了了，就是取 data返回值对象的每个属性，作为 class的属性，好像转换一下就行了

但是，data其实还可以这么写：

export default {
 data () {
  const originA = 1
  return {
   a: originA
  }
 }
}

当 data是 Function 类型时，在 return之前，还可以运行一段代码，这段代码的运行结果可能影响到 data的值

这种写法并不少见，所以不可忽视，但如何处理 return之前的代码？

我的做法是将 return之前的代码放到 created生命周期函数中，并且在 created中的这些代码之后，再对每个 data重新赋一遍值
比如，对于上面的代码来说，转换成 ts，可以这么做：

export default class YourComponent extends Vue {
 a: any = null
 created () {
  const originA = 1
  this.a = originA
 }
}

所以，这就又涉及到 data对 created的数据修改了，这里可以考虑强制先处理 data，但是我看了下，其实这里写两段逻辑也并不复杂，所以我就不严格规定处理的顺序了

model

vue官网对于 model的介绍在 model

model中引用了 props中的值，所以 model的使用其实是需要 props配合的

export default {
 model: {
  prop: 'checked',
  event: 'change'
 },
 props: {
  checked: {
   type: Boolean
  }
 }
}

上述转换为 ts对应如下：

export default class YourComponent extends Vue {
 @Model('change', { type: Boolean }) readonly checked!: boolean
}

可见，@Model是具备声明 props的功能的，在 @Model中声明了的 props，就没必要在 @Prop中再声明一遍了，所以我这里安排了一下处理顺序，先处理 model，再处理 props，并且在处理 props的时候，将 model中已经声明了的 props筛选掉

当然，你也可以不专门先处理 model再处理 props，只要在处理 model的时候判断一下，是否在此之前已经处理过 props了，根据结果来做相应的处理流程，但这样未免有些麻烦，需要根据 props的处理与否来写两段逻辑，这两段逻辑比上面 data影响 created的要复杂一些，所以这里我就直接按照顺序处理了，省得给自己找麻烦

computed

vue官网对于 model的介绍在 computed

以下几种 computed的写法都是正确的

export default {
 computed: {
  a () { return true },
  b: function () { return true },
  d: {
   get () { return true },
   set: function (v) { console.log(v) }
  }
 }
}

vue-property-decorator并没有提供专门的用于 computed的修饰器，因为 ES6的 get/set语法本身就可以替代 computed
上述转换为 ts对应如下：

export default class YourComponent extends Vue {
 get a () { return true }
 get b () { return true },
 get d (){ return true },
 set d (v) { console.log(v) }
}

除此之外，computed其实还支持箭头函数的写法：

export default {
 computed: {
  e: () => { return true }
 }
}

但是 class语法的 get/set不支持箭头函数，所以不好转换，另外因为箭头函数会改变 this的指向，而 computed计算的就是当前 vue实例上的属性，所以一般也不推荐在 computed中使用箭头函数，固然你可以在箭头函数的第一个参数上获得当前 vue实例，但这就未免有点多此一举的嫌疑了，所以我这里略过对箭头函数的处理，只会在遇到 computed上的箭头函数时，给你一个提示

watch

vue官网对于 watch的介绍在watch

以下都是合法的 watch写法：

export default {
 watch: {
  a: function (val, oldVal) {
   console.log('new: %s, old: %s', val, oldVal)
  },
  // 方法名
  b: 'someMethod',
  // 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
  c: {
   handler: function (val, oldVal) { /* ... */ },
   deep: true
  },
  // 该回调将会在侦听开始之后被立即调用
  d: {
   handler: 'someMethod',
   immediate: true
  },
  e: [
   'handle1',
   function handle2 (val, oldVal) { /* ... */ },
   {
    handler: function handle3 (val, oldVal) { /* ... */ },
    immediate: true
   }
  ],
  // watch vm.e.f's value: {g: 5}
  'e.f': function (val, oldVal) { /* ... */ }
 }
}

上述转换为 ts对应如下：

export default class YourComponent extends Vue {
 @Watch('a')
 onAChanged(val: any, oldVal: any) {}
 @Watch('b')
 onBChanged (val: any, oldVal: any) {
  this.someMethod(val, oldVal)
 }
 @Watch('c', { deep: true })
 onCChanged (val: any, oldVal: any) {}
 @Watch('d', { deep: true })
 onDChanged (val: any, oldVal: any) {}
 @Watch('e')
 onE1Changed (val: any, oldVal: any) {}
 @Watch('e')
 onE2Changed (val: any, oldVal: any) {}
 @Watch('e'， { immediate: true })
 onE3Changed (val: any, oldVal: any) {}
 @Watch('e.f')
 onEFChanged (val: any, oldVal: any) {}
}

写法还是很多的，所以判断分支肯定少不了

watch下的每个属性都是一个需要进行 watch的 vue响应值，这些属性的值可以是字符串、函数、对象和数组，共四种类型
其中，字符串类型就是相当于调用当前 vue实例里的方法，函数类型就是调用这个函数，比较简单；

对于对象类型，其具有三个属性：handler、deep、immediate，三个属性都是可选，其中 handler的值是函数或字符串，其他两个属性的值都是 boolean类型；

对于数组类型，其每一个数组项，其实都相当于是字符串类型、函数类型和对象类型的聚合，所以实际上只要处理这三种类型即可，数组类型则直接遍历数组项，每个数组项的类型肯定在这三个类型之内，按照类型调用相应的处理方法即可。

这是主体部分，除此之外，还需要考虑 handler函数的形式，以下几种函数的写法都是合法的：

export default {
 watch: {
  a: function {},
  b () {},
  c: () => {},
  d: async function {},
  e: async () => {}
 }
}

不仅在 watch里面，其他一些 vue实例属性，比如 created、computed等，只要是可能出现函数的地方，都需要考虑到这些写法
当然，除此之外，还有 Generator函数，但我这里不考虑，有更好的 async/await可用，为什么非要用 Generator

methods

vue实例的方法，都作为 methods这个对象的属性存在，每个方法都是一个函数，所以只需要将原 methods下的所有方法取出，转换为 class的方法即可，没什么工作量

不过需要注意的是，函数的写法有很多，还可以支持 async/await，这些写法都需要考虑到

lifeCycle

vue的生命周期钩子函数有很多，还有一些第三方的钩子函数，例如 vue-router：

const vueLifeCycle = ['beforeCreate', 'created', 'beforeMount', 'mounted', 'beforeUpdate', 'updated', 'activated', 'deactivated', 'beforeDestroy', 'destroyed', 'errorCaptured', 'beforeRouteEnter', 'beforeRouteUpdate', 'beforeRouteLeave']

这些钩子函数其实就是函数，跟 methods的处理方法一样

component

这个比较简单，转化一下然后拼接

export default {
 components: {
  a: A,
  B
 },
}

上述转换为 ts对应如下：

@Component({
 components: {
  a: A,
  B
 }
})
export default class TransVue2TS extends Vue {}

所以就是把原 components的属性全部映射一遍即可

mixins

vue官网对于 mixins的介绍在 mixins

其值类型为 Array