1、使用官方腳手架構建
新的 VueCLI工具允許開發者 使用 TypeScript 集成環境 創建新項目。
只需運行 vue createmy-app。
然后，命令行會要求選擇預設。使用箭頭鍵選擇 Manuallyselectfeatures。
接下來，只需確保選擇了 TypeScript和 Babel選項，如下圖：
完成此操作后，它會詢問你是否要使用 class-style component syntax。
然后配置其余設置，使其看起來如下圖所示。
Vue CLI工具現在將安裝所有依賴項並設置項目。
接下來就跑項目啦。
總之，先跑起來再說。
2、項目目錄解析
通過 tree指令查看目錄結構后可發現其結構和正常構建的大有不同。
這里主要關注 shims-tsx.d.ts和 shims-vue.d.ts兩個文件
兩句話概括：
-
shims-tsx.d.ts，允許你以.tsx結尾的文件，在Vue項目中編寫jsx代碼 -
shims-vue.d.ts主要用於TypeScript識別.vue文件，Ts默認並不支持導入vue文件，這個文件告訴ts導入.vue文件都按VueConstructor<Vue>處理。
此時我們打開親切的 src/components/HelloWorld.vue，將會發現寫法已大有不同
至此，准備開啟新的篇章 TypeScript極速入門 和 vue-property-decorator
3. Vue組件的 Ts寫法
從 vue2.5 之后，vue 對 ts 有更好的支持。根據官方文檔，vue 結合 typescript ，有兩種書寫方式
Vue.extend
vue-class-component
理想情況下， Vue.extend 的書寫方式，是學習成本最低的。在現有寫法的基礎上，幾乎 0 成本的遷移。
但是 Vue.extend模式，需要與 mixins 結合使用。在 mixin 中定義的方法，不會被 typescript 識別到
，這就意味着會出現丟失代碼提示、類型檢查、編譯報錯等問題。
菜鳥才做選擇，大佬都挑最好的。直接講第二種吧：
4.1 vue-class-component
我們回到 src/components/HelloWorld.vue
有寫過 python的同學應該會發現似曾相識：
-
vue-property-decorator這個官方支持的庫里，提供了函數 裝飾器（修飾符）語法
1. 函數修飾符 @
“@”，與其說是修飾函數倒不如說是引用、調用它修飾的函數。
或者用句大白話描述： @: "下面的被我包圍了。"
舉個栗子，下面的一段代碼，里面兩個函數，沒有被調用，也會有輸出結果：
直接運行，輸出結果：
上面代碼可以看出來:
-
只定義了兩個函數：
test和func，沒有調用它們。 -
如果沒有“@test”，運行應該是沒有任何輸出的。
但是，解釋器讀到函數修飾符“@”的時候，后面步驟會是這樣：
1、去調用 test函數， test函數的入口參數就是那個叫“ func”的函數；
2、test函數被執行，入口參數的（也就是 func函數）會被調用（執行）；
換言之，修飾符帶的那個函數的入口參數，就是下面的那個整個的函數。有點兒類似 JavaScript里面的 functiona(function(){...});
2. vue-property-decorator和 vuex-class提供的裝飾器
vue-property-decorator的裝飾器：
-
@Prop -
@PropSync -
@Provide -
@Model -
@Watch -
@Inject -
@Provide -
@Emit -
@Component(provided by vue-class-component) -
Mixins(the helper function namedmixinsprovided by vue-class-component)
vuex-class的裝飾器：
-
@State
-
@Getter
-
@Action
-
@Mutation
我們拿原始Vue組件模版來看：
以上模版替換成修飾符寫法則是：
正如你所看到的，我們在生命周期 列表那都添加 privateXXXX方法，因為這不應該公開給其他組件。
而不對 method做私有約束的原因是，可能會用到 @Emit來向父組件傳遞信息。
4.2 添加全局工具
引入全局模塊，需要改 main.ts:
npm iVueI18n
但僅僅這樣，還不夠。你需要動 src/vue-shim.d.ts：
之后使用 this.$i18n()的話就不會報錯了。
4.3 Axios 使用與封裝
1. 新建文件 request.ts
文件目錄:
2. request.ts文件解析
為了方便，我們還需要定義一套固定的 axios 返回的格式，新建 ajax.ts：
3. main.ts接口調用：
4、編寫一個組件
為了減少時間，我們來替換掉 src/components/HelloWorld.vue，做一個博客帖子組件：
然后在 Home.vue中使用:
這時候運行項目
這就是簡單的父子組件
5、參考文章
TypeScript — JavaScript with superpowers — Part II
VUE WITH TYPESCRIPT
TypeScript + 大型項目實戰
Python修飾符 （一）—— 函數修飾符 “@”
Typescript 中的 interface 和 type到底有什么區別