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

不过我这里写的这个程序，因为不需要太过细致的解析，所以没用@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<string> 和 对象 这两种类型

数组类型

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

@Prop() readonly propsName: any | undefined

只需要遍历 Array<string>类型的 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，则调用