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，则调用
handlerType进行处理，否则直接原样作为 @Prop的参数即可
data
vue官网对于 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中引用了 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的写法都是正确的
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 } } }