>[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) ~~~