但是 class语法的 get/set不支持箭头函数，所以不好转换，另外因为箭头函数会改变 this的指向，而 computed计算的就是当前 vue实例上的属性，所以一般也不推荐在 computed中使用箭头函数，固然你可以在箭头函数的第一个参数上获得当前 vue实例，但这就未免有点多此一举的嫌疑了，所以我这里略过对箭头函数的处理，只会在遇到 computed上的箭头函数时，给你一个提示
watch
vue官网对于 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的介绍在
其值类型为 Array<Object>
export default { mixins: [A, B] }
上述转换为 ts对应如下：
export default class TransVue2TS extends Mixins(A, B) {}
原本 extends Vue改成 extends Mixins，并且 Mixins的参数就是原 mixins的所有数组项
provide && inject
当我考虑如何处理这两个的时候，看了下 vue官网，官网上对于这两个是这么说的：
provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。