vue+vue-cli3 與 typeScript 的引入與混入

前言：

TypeScript的設計目的應該是解決JavaScript的“痛點”：弱類型和沒有命名空間，導致很難模塊化，不適合開發大型程序。另外它還提供了一些語法糖來幫助大家更方便地實踐面向對象的編程。---- 引子

TypeScript官方文檔地址

主題：
第一步、安裝依賴：
npm、cnpm、yarn都支持
npm install typescript ts-loader --save-dev
npm install vue-property-decorator --save-dev

第二步、配置vue.config.js 打包與啓動：

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同級）：

{
  	"compilerOptions": {
    "target": "es5", // 編譯目標平臺
    "outDir": "./dist/", // 輸出目錄
    "module": "commonjs", // 指定生成哪個模塊系統代碼
    "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，且使用命令行參數–project（或-p）指定一個包含tsconfig.json文件的目錄。
   當命令行上指定了輸入文件時，tsconfig.json文件會被忽略。

以上配置應該是目前最全的配置了。

第四步、聲明文件：
舉例 : 使用swipe
新建聲明文件shims-vue.d.ts放在根目錄：

declare module 'vue-awesome-swiper' {
  export const Swiper: any
  export const SwiperSlide: any
}

這個主要的作用是聲明vue外部引入的組件庫等。

第五步、新建sfc.d.ts 全局vue聲明文件：

/**
 * 告訴 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文件後，可以逐個文件慢慢改。
但開發中的項目引入ts我建議先不要使用main.ts當入口文件
可以優先改寫vue中的ts寫法
在vue中引入ts：

//內容
<script lang='ts'>
methods:{
	//例子:寫一個點擊選中鏈接的功能
	copyUrl(data){
		//js寫法
		var Url1 = document.getElementById("inviteCode").innerText ; //js
		//ts寫法
		var Url2 = (document.getElementById("inviteCode") as HTMLInputElement).innerText ; //ts
		//ts標準寫法
		interface Person {
		    firstName: string;
		    lastName: string;
		}
		
		function greeter(person: Person) {
		    return "Hello, " + person.firstName + " " + person.lastName;
		}
		
		let user = { firstName: "Jane", lastName: "User" };
		
		document.body.innerHTML = greeter(user);
			}
		initData(key_type:any){
				//函數
		}
   		

}
</script>

待項目基本改寫完成，最後更改main.js。

以上

全文完