程式設計三昧2018-12-09 16:57:57一、為什麼要接入typescript
avascript由於自身的弱型別，使用起來非常靈活。
這也就為大型專案、多人協作開發埋下了很多隱患。如果是自己的私有業務倒無所謂，主要是對外介面和公共方法，對接起來非常頭疼。主要表現在幾方面：
引數型別沒有校驗，怎麼傳都有，有時會出現一些由於型別轉換帶來的未知問題。
介面文件不規範，每次都要透過讀程式碼才能知道傳什麼，怎麼傳
介面編寫符合規範，但是公共庫中有大量的處理型別校驗的程式碼
這就非常不利於工程標準化。於是我們決定引入typescript進行程式碼層面的強校驗。
原有vue專案接入ts主要包含下面幾大步驟：
安裝typescript相關npm包
修改webpack和ts配置檔案
專案公共庫和vue檔案改造
1。 安裝typescript相關npm包
這塊有個非常重要的點需要注意：
就是要根據你本地的環境，去升級對應版本的typescript
這塊是很多初次使用的同學都會遇到的問題。
因為只是看到了官網的教程，一步一步安裝完發現各種報錯。主要問題就是webpack版本不匹配，或者其他一些npm包版本不匹配
以我本地為例：
我本地環境是webpack3，所以直接安裝最新版本的typescript，控制檯會報錯webpack版本過低的問題。
所以你要不把自己的webpack升級到webapck4。要不就採用與之相匹配的typescript版本。
我選擇的是後者，因為直接給自己的專案升級到webapck4，會花費更長的時間。我們用的腳手架是公司內部統一的。裡面集成了很多底層通用的基礎服務。冒然升級webpack4會帶來更大的麻煩，更何況專案時間比較緊迫，你懂得。
下面是我安裝的包和對應的版本：
“typescript”： “^3。1。4” （這個是必須的，ts庫）
“ts-loader”： “^3。5。0” （識別ts的laoder）
“tslint”： “^5。11。0” （tslint校驗庫）
“tslint-loader”： “^3。5。4” （tslint的loader）
“tslint-config-standard”： “^8。0。1” （用於tslint預設校驗規則）
“vue-property-decorator”： “^7。2。0” （用於在。vue檔案中使用ts語法）
2。 修改配置檔案
修改webpack配置檔案（加入ts的相關配）
注意： main。js改成main。ts後，還要做一些改造，這個比較簡單，按照tslint的錯誤提示改就可以了
在根目錄下建立tslint。json（類似eslint，這裡設定一個校驗標準）
在根目錄建立tsconfig。json（typescript配置檔案）
在src目錄下建立sfc。d。ts（用來宣告全域性變數、class、module、function、名稱空間）
我們在這裡主要是讓ts識別。vue檔案、window物件和一些module
具體declare的使用方式請看這裡 （https：//www。tslang。cn/docs/handbook/declaration-files/by-example。html）
將src/main。js改為main。ts
3。專案改造
這個部分是最麻煩的，主要有幾大塊
基礎庫改造
如果你的基礎庫引用了大量的npm包，那麼恭喜你，這部分你的改造成本會低很多。
如果你的lib庫有相當一部分都是自己手寫的，那麼，我也得恭喜你。。。
我們自己的lib庫裡，有大量的自己維護的js檔案。那麼如果你要進行ts改造的話，通通都要改。
舉個例子： lib/url。js 中的getParam （演算法並不高階，就是易讀、相容性好）
改造後的檔案為：lib/url。ts
對於一個方法多種呼叫方式，如果你想完全改成typescript推薦的方式，你可以用到方法過載。（https：//www。tslang。cn/docs/handbook/functions。html）
我沒有用是因為我不希望改變原有頁面的使用方式。
注：對於一個大型專案來講，我們並不建議上來就對全部的檔案進行ts改造。我們更建議採用漸進式改造方案，在不影響原有頁面的情況下，逐一改造。具體方案後面會介紹
vue檔案改造
src/components/helper/newUser/index。vue
改造後
myComponent。vue改造前略，這裡只展示改造後的元件
這裡需要注意的是：
ts預設不會識別。vue檔案，所以需要在sfc。d。ts檔案中宣告，同時在引入vue元件時，要加。vue字尾
引入vue-property-decorator外掛。採用修飾符的方式進行元件註冊，這樣裡面的data、prop和function都透過扁平化方式呼叫（這也是官方推薦的方式）
ts中import引入檔案，如果不寫字尾，預設是js檔案。如果js檔案沒有，則才識別ts檔案
現在說下前面提到的改造方案：
這裡其實主要涉及。vue檔案和lib庫的改造，vue檔案沒啥可說的，一個個改就可以了。主要說lib裡面的檔案，這裡我建議：
一開始保留原來的js檔案，並不刪除。這樣目前尚未改造的檔案可以繼續使用
新建對應的ts檔案，比如lib中有util。js，新建立util。ts
新改造的vue檔案通通引入lib庫中xx。ts（要加。ts字尾），如import Util from ‘@/lib/util。ts’ 這樣可以一點點改造整個專案，同時未改造的頁面照樣可以執行。
