原有 Vue 專案接入 TypeScript
作者 | 陳龍
為什麼要接入typescript
javascript由於自身的弱型別，使用起來非常靈活。
這也就為大型專案、多人協作開發埋下了很多隱患。如果是自己的私有業務倒無所謂，主要是對外介面和公共方法，對接起來非常頭疼。主要表現在幾方面：
-
引數型別沒有校驗，怎麼傳都有，有時會出現一些由於型別轉換帶來的未知問題。
-
介面文件不規範，每次都要通過讀程式碼才能知道傳什麼，怎麼傳
-
介面編寫符合規範，但是公共庫中有大量的處理型別校驗的程式碼
這就非常不利於工程標準化。於是我們決定引入typescript進行程式碼層面的強校驗。
概覽
原有vue專案接入ts主要包含下面幾大步驟：
-
安裝typescript相關npm包
-
修改webpack和ts配置檔案
-
專案公共庫和vue檔案改造
ok，我們開始
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
專案改造
這個部分是最麻煩的，主要有幾大塊
-
基礎庫改造
如果你的基礎庫引用了大量的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' 這樣可以一點點改造整個專案，同時未改造的頁面照樣可以執行。
ok以上就是我們改造的全部過程。 有什麼問題可以指正，大家互相學習
