因为typescript增加了代码的可读性和可维护性，所以被越来越多的公司所接受。现在很多公司都用typescript。vue作为国内最流行的框架，一直以来对typescript扩展都不友好。现在借助vue-class-component和vue-property-decorator这两个扩展插件，我们也可以很方便的在vue中使用typescript+JSX模板来编写我们的vue程序了。开始使用vue-cli4初始化项目，记得勾选typescript项，然后新建一个名为test.tsx的文件，写入如下代码，这样我们就可以使用JSX模板来编写我们的代码了，但是，在vue中有些Vue的指令不能在JSX模板中使用，需要灵活。接下来会给出一些例子，看看vue的一些指令是如何在JSX模板中使用的。Computedpropertycomputed和listenerwatch这里的监听事件需要用vue-property-decorator的Watch功能来监听。v-show、v-if、v-为属性修正，在jsx模板中可以使用v-show命令进行事件处理。可以看到one修饰符事件需要用到~click，有些事件修饰符为了灵活，在渲染函数中参考vue的事件&按钮修饰符，防止默认事件，防止冒泡事件。也需要自己在事件中处理，不能使用修饰符。这里要注意subcomponentbutton.tsx父组件test.tsx的prop属性，如果直接会报错，因为不符合组件规范slot属性subcomponentButton.tsx父组件test.tsx可以看到scopedSlots是用来在slots中传值的。详细可以看vue官网上的slot是在rendering函数中使用的。this.$scopedSlots照常使用是为了防止typescript报错，因为typescript上的this.$scopedSlots无法识别。msgslot的类型是什么？同时，在vm.$refs上定义事件时也要做类似的处理。例如，ref上有一个事件handleEvent。要触发这个事件，可以使用下面的写法。constref:any=this.$refs.ref;ref.handleEvent()$emit使用子组件Button.tsx父组件test.tsx详情请参考@Emit使用这里需要注意的是，如果父组件要调用子组件的native事件不能直接写我是一个按钮而是使用nativeOn，而是使用如下形式：我是一个按钮具体可以看vue深入数据对象mixins属性Mixin.tsxtest.tsx。这里我们需要使用vue-class-component插件来完成mixins混合。更多的用法可以参考这里和这里的mixins使用结语参考vue官网的渲染函数&JSX，我们可以更好的在vue中使用jsx模板。但是使用jsx模板而不是template模板。vue的一些指令不能在jsx中使用。很多指令需要灵活，写法比较繁琐。vue的一些指令可以快速开发我们的程序，但是jsx模板有利于代码提示。提高代码的可读性和可维护性，增强团队间的开发。
