前言：
TypeScript的設計目的應該是解決JavaScript的“痛點”：弱類型和沒有命名空間，導致很難模塊化权逗，不適合開發(fā)大型程序。另外它還提供了一些語法糖來幫助大家更方便地實踐面向對象的編程毅往。---- 引入
[TypeScript官方文檔地址](https://www.tslang.cn/docs/home.html)
主題：
第一步漾稀、安裝依賴：
npm、cnpm腾节、yarn都支持
npm install typescript ts-loader --save-dev
npm install vue-property-decorator --save-dev
第二步忘嫉、配置vue.config.js 打包與啟動：
```javascript
module.exports = {
? ? publicPath: './',
? ? configureWebpack: config => {
? ? ? ? config.externals = {
? ? ? ? ? // 混入ts↓
? ? ? ? ? ? resolve: { extensions: [".ts", ".tsx", ".js", ".json"] },
? ? ? ? ? ? // 使用ts后改變入口文件
? ? ? ? ? ? base: {
? ? ? ? ? ? ? ? entry: {
? ? ? ? ? ? ? ? app: resolve('src/main.ts') // 把main.js改為main.ts
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? resolve: {
? ? ? ? ? ? ? ? ? ? extensions: ['vue', '.js', '.ts']
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? module: {
? ? ? ? ? ? ? ? ? ? rules: [
? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? test: /\.tsx?$/,
? ? ? ? ? ? ? ? ? ? ? ? ? ? loader: 'ts-loader',
? ? ? ? ? ? ? ? ? ? ? ? ? ? exclude: /node_modules/,
? ? ? ? ? ? ? ? ? ? ? ? ? ? options: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? appendTsSuffixTo: [/\.vue$/],
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? // 混入ts結束??
? ? ? ? ? ? }
? ? ? ? }
```
第三步荤牍、新建tsconfig.json放在項目根目錄（與packge.json同級）：
```javascript
{
? "compilerOptions": {
? ? "target": "es5", // 編譯目標平臺
? ? "outDir": "./dist/", // 輸出目錄
? ? "module": "commonjs", // 指定生成哪個模塊系統(tǒng)代碼
? ? "noImplicitAny": false, // 在表達式和聲明上有隱含的any類型時報錯
? ? "removeComments": true, // 移除注釋
? ? "pretty": true,
? ? "strict": true,
? ? "importHelpers": true,
? ? "moduleResolution": "node", // 模塊的解析
? ? "experimentalDecorators": true, // 啟用裝飾器
? ? "esModuleInterop": true,
? ? "allowSyntheticDefaultImports": true,
? ? "sourceMap": true, // 把 ts 文件編譯成 js 文件的時候，同時生成對應的 map 文件
? ? "baseUrl": "./", // 指定基礎目錄
? ? "allowJs": true, // 允許編譯javascript文件
? ? "noEmit": true,
? ? // "types": [
? ? //? "webpack-env"
? ? // ],
? ? "paths": {
? ? ? "@/*": [
? ? ? ? "src/*"
? ? ? ]
? ? },
? ? // 添加需要的解析的語法庆冕，否則TS會檢測出錯康吵。
? ? "lib": [
? ? ? "esnext",
? ? ? "dom",
? ? ? "dom.iterable",
? ? ? "scripthost"
? ? ]
? },
? "include": [
? ? "src/**/*",
? ? "types"
? ],
? "exclude": [
? ? "node_modules"
? ]
}
```
如果一個目錄下存在一個tsconfig.json文件，那么它意味著這個目錄是TypeScript項目的根目錄访递。 tsconfig.json文件中指定了用來編譯這個項目的根文件和編譯選項晦嵌。 一個項目可以通過以下方式之一來編譯：
使用tsconfig.json
1. 不帶任何輸入文件的情況下調用tsc，編譯器會從當前目錄開始去查找tsconfig.json文件力九，逐級向上搜索父目錄。
2. 不帶任何輸入文件的情況下調用tsc邑闺，且使用命令行參數(shù)--project（或-p）指定一個包含tsconfig.json文件的目錄跌前。
當命令行上指定了輸入文件時，tsconfig.json文件會被忽略陡舅。
以上配置應該是目前最全的配置了抵乓。
第四步、聲明文件：
舉例 : 使用swipe
新建聲明文件shims-vue.d.ts放在根目錄：
```javascript
declare module 'vue-awesome-swiper' {
? export const Swiper: any
? export const SwiperSlide: any
}
```
這個主要的作用是聲明vue外部引入的組件庫等靶衍。
第五步灾炭、新建sfc.d.ts 全局vue聲明文件：
```javascript
/**
* 告訴 TypeScript *.vue 后綴的文件可以交給 vue 模塊來處理
* 而在代碼中導入 *.vue 文件的時候，需要寫上 .vue 后綴颅眶。
* 原因還是因為 TypeScript 默認只識別 *.ts 文件蜈出，不識別 *.vue 文件
*/
declare module "*.vue" {
? import Vue from 'vue'
? export default Vue
}
/**
* 告訴 TypeScript window是個全局對象，直接可用涛酗，這樣就不會在window.xx = 123時報錯
*/
declare var window: any
/**
* 引入部分第三方庫/自己編寫的模塊的時候需要額外聲明文件
* 引入的時候铡原，需要使用類似 import VueLazyLaod from 'vue-lazyload' 的寫法
*/
// 例子：
// declare module 'vue-lazyload'
// declare module '@zz/perf/vue'
// declare module 'raven-js'
// declare module 'raven-js/plugins/vue'
```
第六步、總結：
總體來說商叹，無論是初始項目引入燕刻，或是已有項目混入ts都是比較友好的。
比如配置適配js文件后剖笙，可以逐個文件慢慢改卵洗。
但開發(fā)中的項目引入ts我建議先不要使用main.ts當入口文件
可以優(yōu)先改寫vue中的ts寫法
在vue中引入ts：
```javascript
<script lang="ts">
//內容
</script>
```
待項目基本改寫完成，最后更改main.js弥咪。
以上
全文完
