【vue&ts開發】Vue 3.0前的 TypeScript 最佳入門實踐

一、使用官方腳手架構建

新的 VueCLI工具容許開發者 使用 TypeScript 集成環境 建立新項目。

只需運行 vue createmy-app。

而後，命令行會要求選擇預設。使用箭頭鍵選擇 Manuallyselectfeatures。

接下來，只需確保選擇了 TypeScript和 Babel選項，以下圖：

完成此操做後，它會詢問你是否要使用 class-style component syntax。

而後配置其他設置，使其看起來以下圖所示。

 Vue CLI工具如今將安裝全部依賴項並設置項目。

 接下來就跑項目啦。

 總之，先跑起來再說。

二、項目目錄解析

經過 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」，運行應該是沒有任何輸出的。

可是，解釋器讀到函數修飾符「@」的時候，後面步驟會是這樣：

一、去調用 test函數， test函數的入口參數就是那個叫「 func」的函數；

二、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 named mixins provided 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接口調用：

四、編寫一個組件

爲了減小時間，咱們來替換掉 src/components/HelloWorld.vue，作一個博客帖子組件：

 而後在 Home.vue中使用:

 這時候運行項目

 這就是簡單的父子組件

五、參考文章

TypeScript — JavaScript with superpowers — Part II

VUE WITH TYPESCRIPT

TypeScript + 大型項目實戰

Python修飾符 （一）—— 函數修飾符 「@」

Typescript 中的 interface 和 type到底有什麼區別