為什么要遷移至Typescript

Javascript本身是動態弱類型的語言，這樣的特點導致了Javascript代碼中充斥著很多Uncaught TypeError的報錯，給開發調試和線上代碼穩定都帶來了不小的負面影響。

而Typescript提供了靜態類型檢查，使很多類型錯誤在編寫時就已經發現，不會帶到測試階段。

同時，Javascript不定義model就可以使用一個對象，有人喜歡這樣的靈活性，的確這樣的語法在model不復雜的時候可以快速的開發出需要的功能，但一旦model龐大，找一個需要的屬性值都不知道從何找起。而在Typescript中，我們需要使用TS中的interface type等方式先定義出model，才可以調用其屬性值，所以Typescript極大的提高了代碼的可讀性。

可行性

因為TypeScript是JavaScript的超集，TypeScript 不會阻止 JavaScript 的運行，即使存在類型錯誤也不例外，這能讓你的 JavaScript 逐步遷移至 TypeScript。所以可以慢慢地做遷移，一次遷移一個模塊，選擇一個模塊，重命名.js文件到.ts，在代碼中添加類型注釋。當你完成這個模塊時，選擇下一個模塊。

如何將已有的Vue項目遷移至Typescript

安裝依賴

Vue官方提供了一個庫Vue-class-component，用于讓我們使用Ts的類聲明方式來編寫vue組件代碼。Vue-property-decorator則是在Vue-class-component的基礎上提供了裝飾器的方式來編寫代碼。首先我們需要在package.json中引入這兩個依賴。

我的項目是基于vue-cli@3.X創建的，還需要在項目中引入@vue/cli-plugin-typescript typescript兩個依賴來完成Typescript的編譯。

配置tsconfig.json

在項目根目錄新建tsconfig.json,并引入以下代碼

{ "compilerOptions": {  "target": "esnext",  "module": "esnext",  "strict": true,  "jsx": "preserve",  "importHelpers": true,  "moduleResolution": "node",  "experimentalDecorators": true,  "esModuleInterop": true,  "allowSyntheticDefaultImports": true,  "sourceMap": true,  "baseUrl": ".",  "noFallthroughCasesInSwitch":true,  "noImplicitAny":true,  "noImplicitReturns":true,  "noImplicitThis":true,  "types": [   "webpack-env"  ],  "paths": {   "@/*": [    "./app/common/*"   ],   "_app/*": [    "./app/*"   ],   "_c/*": [    "./app/common/components/*"   ],   "api/*": [    "./app/service/*"   ],   "assets/*": [    "./app/assets/*"   ]  },  "lib": [   "esnext",   "dom",   "dom.iterable",   "scripthost"  ], }, "include": [   // 在此出填寫你的項目中需要按照typescript編譯的文件路徑  "app/**/*.ts",  "app/**/*.tsx",  "app/**/*.d.ts",  "app/**/*.vue", ], "exclude": [  "node_modules" ]}

特別需要注意的是，現在的vue項目中大多使用了webpack的alias來解析路徑,在tsconfig.json中需要配置path屬性，讓typescript同樣認識在webpack中配置的路徑別名。