截至2019年底，TypeScript（簡稱ts）已經與Python並列成為第二受歡迎的開發語言，僅次於Rust。如果你還不清楚到底什么是ts，請先移步至ts中文網了解。再過幾個月Vue3.0版本就將正式發布，源碼完全使用TypeScript編寫，Vue與TypeScript的集成勢必將成為接下來的趨勢。
鑒於手頭剛好有一個新項目要做，就想着提前先體驗一把。新項目使用Vue-cli3.0 + TypeScript3.0開發（因為Vue-cli2.0與ts的集成體驗並不好，所以就不考慮了），其實Vue-cli3.0腳手架中已經集成了ts，在創建項目時我們只要選擇基於ts的開發模式就行。下面我們就來說一下具體的操作：
一、創建項目
Vue-cli3.0創建項目的命令為vue create vue-ts（vue-ts為項目名稱），這個大家應該都知道，命令執行后會出現如下的界面
然后直接回車就可以了。但創建基於ts的項目是要選擇手動創建(Manually select features)，回車后會出現以下界面
通過上/下鍵和空格鍵選擇要用到的插件，選好后回車進入下一步，對於后面的選項可以一路默認，也可以根據個人意向選擇，這樣項目就創建好了，項目結構如下
然后啟動運行將看到如下界面
其中tsconfig.json是ts項目的配置文件，各配置項的作用可以去ts中文網了解。
shims-vue.d.ts文件用來對vue進行聲明，為什么要進行這樣的聲明呢？因為ts無法自動識別.vue后綴的文件。對該文件的詳解可以自己先去查文檔。
二、語法結構
對於.ts后綴的文件，因為TypeScript是JavaScript 的一個超集，所以我們完全可以在ts文件中編寫js代碼。。。但不建議這樣做，畢竟ts是一門面向對象的語言，最好還是要體現出面向對象的特性，至少可以用下ts中的類class。如果你剛好會一門面向對象語言（比如java或者c++）的話就很容易理解我這句話的意思，否則請回過頭再去多看看ts的文檔。
其實這里真正想說的是vue文件的語法結構，對於上面創建好的項目我們可以打開App.vue文件看一下，模板template和樣式style部分的寫法基本沒有什么差異，最大的不同就是腳本script部分的寫法，腳本部分代碼如下
到這里呢有兩個插件我們需要先了解以下，vue-class-component和vue-property-decorator，vue-class-component是官方提供的使用類的方式編寫組件，vue-property-decorator則完全依賴於前者，它將一些常用的鈎子都封裝成了裝飾器，使用起來更方便簡潔一些，具體的語法請參考vue-property-decorator官方文檔。
如果想要在ts項目中使用vuex，還需要引入另外一個插件vuex-class，官方文檔中也對具體的語法給出了詳細說明。
對於vue與typescript的集成開發，該篇也只是給出了應用指引，具體還需要個人去學習文檔並親自動手實踐才能有所掌握和體會。后續也會基於ts給出一些應用實例~