>[success] # 参考资料 [vue官方文档 -- TypeScript 支持](https://cn.vuejs.org/v2/guide/typescript.html) [vue-class-component](https://github.com/vuejs/vue-class-component) [vue-property-decorator](https://github.com/kaorun343/vue-property-decorator) >[success] # TS的VUE 和 JS的VUE 大对比 ~~~ 1.根据下面的三个案例,可以看出整体'TS'配合'VUE'的写法有两种(也许方式更多), 这两种官方也给出了解答如果你喜欢'声明组件时更喜欢基于类的 API'推荐第二种。 ~~~ >[danger] ##### JS 的 VUE 文件 ~~~ html <!--模板放置html--> <template></template> <script> export default { name: "basic", data(){}, // 参数 props:{}, // 父传子接受 methods:{}, // 方法 computed:{}, // 计算属性 components:{}, // 组件引入 mounted() {}, // 生命周期 watch:{} // 监听 } </script> <!--放置样式css--> <style scoped> </style> ~~~ >[danger] ##### TS 的 VUE 文件(写法一官方文档) ~~~ 1.在'vue' 文件引入: import Vue from 'vue'; 2.'export' 导出Vue.extend({}),里面剩下写法和'js 写法vue 一致' 3.要让 TypeScript 正确推断 Vue 组件选项中的类型,您需要使用 Vue.component 或 Vue.extend 定义组件 ~~~ ~~~ <template> <div class="about"> <h1>{{name}}</h1> </div> </template> <script lang="ts"> import Vue from 'vue'; export default Vue.extend({ // 类型推断已启用 data() { return{ name: '王', }; }, }); </script> ~~~ >[danger] ##### TS 的 VUE 文件(写法二推荐) ~~~ 1.需要引入'vue-property-decorator'; 2.'export' 导出的时候需要继承'Vue' 3.如果您在声明组件时更喜欢基于类的 API,则可以使用官方维护的 vue-class-component 装饰器 4.但这里使用的是'vue-property-decorator',他是vue社区维护的,是基于官方的 'vue-class-component'的升级版本 5.注意: 在每个组件的类要进行'@Component' 声明告诉'TS'他是一个组件,具体内容 下文会详细说明 ~~~ ~~~html <!--html 模板--> <template> <div class="home"> </div> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator'; // @Component 修饰符注明了此类为一个 Vue 组件 @Component({ name:'Home' }) export default class Home extends Vue {} </script> <!--放置样式css--> <style scoped> </style> ~~~ >[info] ## 针对 文档中的第二种做详细理解 [参考'vue class componen'和'vue component'](https://segmentfault.com/q/1010000015951958/a-1020000015954595) ~~~ 1.想用第二种写法先搞清,依赖包: 1.1'vue-class-component':强化 Vue 组件,使用 TypeScript/装饰器 增强 Vue 组件 1.2'vue-property-decorator':在 vue-class-component 上增强更多的结合 Vue 特性的装饰器 2.'vue class component' 是vue 官方出的,'vue property decorator' 是社区出的 其中'vue class component'提供了 'vue component' 等等 'vue property decorator' 深度依赖了 'vue class component' 拓展出了很多操作符 @Prop @Emit @Inject 等等 可以说是 'vue class component' 的一个超集 正常开发的时候 你只需要使用 'vue property decorator' 中提供的操作符即可 不用再 从'vue class componen' 引入'vue component' 3.通过'vue property decorator'官方文档也可以看出两者的关系: There are 7 decorators and 1 function (Mixin): @Emit @Inject @Model @Prop @Provide @Watch @Component (provided by vue-class-component)(这里就可以看出) Mixins (the helper function named mixins provided by vue-class-component) ~~~ >[danger] ##### 弄清概念 -- 理解文件 ~~~html <!--html 模板--> <template> <div class="home"> </div> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator'; // @Component 修饰符注明了此类为一个 Vue 组件 @Component({ name:'Home' }) export default class Home extends Vue {} </script> <!--放置样式css--> <style scoped> </style> ~~~ >[info] ## vue property decorator -- 文档关键词对照 ~~~ @Emit @Inject @Model @Prop @Provide @Watch @Component (provided by vue-class-component)(这里就可以看出) Mixins (the helper function named mixins provided by vue-class-component) ~~~