vue + typescript 項目起手式

最後更新於2018-06-30，技術文具備時效性，請知悉 

我知道大家早就想用上 vue + ts 強類型了

還有後續 vue + typescript 進階篇

• 安裝vue-cli
• 安裝ts依賴
• 配置 webpack
• 添加 tsconfig.json
• 添加 tslint.json
• 讓 ts 識別 .vue
• 改造 .vue文件

什麼是typescript

TypeScript 是 JavaScript 的強類型版本。而後在編譯期去掉類型和特有語法，生成純粹的 JavaScript 代碼。因爲最終在瀏覽器中運行的仍然是 JavaScript，因此 TypeScript 並不依賴於瀏覽器的支持，也並不會帶來兼容性問題。

TypeScript 是 JavaScript 的超集，這意味着他支持全部的 JavaScript 語法。並在此之上對 JavaScript 添加了一些擴展，如 class / interface / module 等。這樣會大大提高代碼的可閱讀性。

與此同時，TypeScript 也是 JavaScript ES6 的超集，Google 的 Angular 2.0 也宣佈採用 TypeScript 進行開發。這更是充分說明了這是一門面向將來而且腳踏實地的語言。

強類型語言的優點在於靜態類型檢查，具體能夠參見 http://www.zhihu.com/question... 的回答。歸納來講主要包括如下幾點：

1. 靜態類型檢查
2. IDE 智能提示
3. 代碼重構
4. 可讀性

靜態類型檢查能夠避免不少沒必要要的錯誤, 不用在調試的時候才發現問題

前言

隨着vue2.5 更好的 TypeScript 集成，同時由於新開項目的契機，故準備動手嘗試一下typescript + vue

都說ts萬般好，不如一個段子來的直觀，一個程序員自從用上了ts以後，連續寫了3000+行代碼一次編譯經過一鼓作氣，而後很激動的打電話跟老婆炫耀這件事情，老婆回了一句 哦

以前看文章或者 demo 一直認爲 vue + typescript 以後就不能友好的寫.vue單文件，而且我也在各類 live 中問vue + ts 或者 flow的集成，也一直沒有問出什麼好的實踐，可是本上強上ts的念頭，一個字，就是幹！

終於決定本身動手，那接下來從 vue-cli 開始配置 ts，看看事實上集成 ts 的體驗究竟是如何呢？

---

先貼一張最後配置完畢的.vue文件 ，template 和 style 跟之前的寫法保持一致，只有 script 的變化

起手vue-cli

這步應該不用寫了

Vue 引入 TypeScript

首先Cli以後，接下來須要安裝一些必要/之後須要的插件

這些庫大致的做用，能夠按需引入：

• vue-class-component：強化 Vue 組件，使用 TypeScript/裝飾器 加強 Vue 組件
• vue-property-decorator：在 vue-class-component 上加強更多的結合 Vue 特性的裝飾器
• ts-loader：TypeScript 爲 Webpack 提供了 ts-loader，其實就是爲了讓webpack識別 .ts .tsx文件
• tslint-loader跟tslint：我想你也會在.ts .tsx文件 約束代碼格式（做用等同於eslint）
• tslint-config-standard：tslint 配置 standard風格的約束

配置 webpack

首先找到./build/webpack.base.conf.js

• 找到entry.app 將main.js 改爲 main.ts, 順便把項目文件中的main.js也改爲main.ts, 裏面內容保持不變

• 找到resolve.extensions 裏面加上.ts 後綴 （是爲了以後引入.ts的時候不寫後綴）

• 找到module.rules 添加webpack對.ts的解析

是否是加完了，那如今來解釋一下

ts-loader 會檢索當前目錄下的 tsconfig.json 文件，根據裏面定義的規則來解析.ts文件（就跟.babelrc的做用同樣）

tslint-loader 做用等同於 eslint-loader

添加 tsconfig.json

接下來在根路徑下建立tsconfig.json文件

這裏有一份參考的 tsconfig.json 配置，完成的配置請點擊 tsconfig.json：

順便貼一份本身的配置

添加 tslint.json

在根路徑下建立tslint.json文件

這裏就很簡單了，就是 引入 ts 的 standard 規範

讓 ts 識別 .vue

因爲 TypeScript 默認並不支持 *.vue 後綴的文件，因此在 vue 項目中引入的時候須要建立一個 vue-shim.d.ts 文件，放在項目項目對應使用目錄下，例如 src/vue-shim.d.ts

敲黑板，下面有重點！

意思是告訴 TypeScript *.vue 後綴的文件能夠交給 vue 模塊來處理。

而在代碼中導入 *.vue 文件的時候，須要寫上 .vue 後綴。緣由仍是由於 TypeScript 默認只識別 *.ts 文件，不識別 *.vue 文件：

改造 .vue 文件

在這以前先讓咱們瞭解一下所須要的插件（下面的內容須要掌握es7的裝飾器, 就是下面使用的@符號）

vue-class-component

vue-class-component 對 Vue 組件進行了一層封裝，讓 Vue 組件語法在結合了 TypeScript 語法以後更加扁平化：

上面的代碼跟下面的代碼做用是同樣的

vue-property-decorator

vue-property-decorator 是在 vue-class-component 上加強了更多的結合 Vue 特性的裝飾器，新增了這 7 個裝飾器：

• @Emit
• @Inject
• @Model
• @Prop
• @Provide
• @Watch
• @Component (從 vue-class-component 繼承)

在這裏列舉幾個經常使用的@Prop/@Watch/@Component, 更多信息，詳見官方文檔

上面的代碼至關於：

開始修改App.vue文件

1. 在script 標籤上加上 lang="ts", 意思是讓webpack將這段代碼識別爲typescript 而非javascript
2. 修改vue組件的構造方式( 跟react組件寫法有點相似, 詳見官方 )， 以下圖
3. 用vue-property-decorator語法改造以前代碼

固然也能夠直接複製下面的代碼替換就能夠了

接下來用相同的方式修改HelloWorld.vue便可

npm run dev

這個時候運行項目就應該能正常跑起來了

到這裏咱們的配置就已經結束了

最後

若是按照文章沒有配置出來，能夠參考此repo vue-typescript-starter (安全按照文章一步一步操做的版本)

總的來講，就如本文最初講，ts 從數據類型、結構入手，經過靜態類型檢測來加強你代碼的健壯性，從而避免 bug 的產生。

同時能夠繼續使用.vue單文件

並且我我的認爲加上了typescript，項目逼格提高2個level，也能讓後端大哥們不吐槽js弱語言的詬病了

相信以後 vue 對於 ts 的集成會更加友善，期待尤大以後的動做