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

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的要复杂一些，所以这里我就直接按照顺序处理了，省得给自己找麻烦