摘要：引入全面指南系列目錄引入全面指南引入全面指南篇寫在前面寫這篇文章時(shí)的我，使用經(jīng)驗(yàn)三個(gè)多月，完全空白，花了大概三個(gè)晚上把手頭項(xiàng)目遷移至，因此這篇文章更像個(gè)入門指引。見文章引入全面指南篇完整代碼見庫(kù)，分支為整合示例，分支為不含的基礎(chǔ)示例。

系列目錄：

Vue2.5+ Typescript 引入全面指南

Vue2.5+ Typescript 引入全面指南 - Vuex篇

寫這篇文章時(shí)的我，Vue使用經(jīng)驗(yàn)三個(gè)多月，Typescript完全空白，
花了大概三個(gè)晚上把手頭項(xiàng)目遷移至Typescript，因此這篇文章更像個(gè)入門指引。

兩大原則：

由于我個(gè)人從Javascript到Typescript的升級(jí)，更傾向于平滑順移，因此，我對(duì)新依賴的引入整體保持克制原則，只引入了必要項(xiàng)，以盡量貼近原生vue寫法：

typescript

ts-loader

以下依賴均未引入：

vue-class-component：官方維護(hù)，學(xué)習(xí)成本小，但與vuex融合性較差，計(jì)劃等官方完善對(duì)vuex支持后再考慮引入

vue-property-decorator：非官方維護(hù)，一定學(xué)習(xí)成本

vuex-class：非官方維護(hù)，在 vue-class-component 基礎(chǔ)上補(bǔ)充一定vuex支持（支持有限）

vuex-ts-decorators/vuex-typescript等：非官方維護(hù)，學(xué)習(xí)成本極高

PS: 后總結(jié)，vue官方維護(hù)的 vue-class-component 還是很有必要引入的，文末有詳細(xì)說(shuō)明。
PS: tslint-loader由于對(duì)vue的支持尚不完美，作為可選項(xiàng)文末有詳細(xì)說(shuō)明。

any 任意類型的存在，在我看來(lái)就是個(gè)潘多拉魔盒，一旦開啟，很容易養(yǎng)成偷懶的習(xí)慣，碰到難題就上 any。因此，我的建議是，盡量不要去碰它，除非你無(wú)路可走。

注：這里只介紹Webpack模板下使用。

vue init webpack <項(xiàng)目名稱> 生成的項(xiàng)目需做如下改動(dòng)以兼容 Typescript:

npm i --save-dev typescript ts-loader 安裝必要依賴。推薦使用 npm 8及以上版本。

./build/webpack.base.conf.js，作如下改動(dòng)：

entry入口文件main.js改為main.ts：

entry: {
  app: "./src/main.ts"
}

resolve.extensions添加.ts：

resolve: {
  extensions: [".js", ".ts", ".vue", ".json"]
}

module.rules添加.ts解析規(guī)則：

module: {
  rules: [
    {
      test: /.tsx?$/,
      loader: "ts-loader",
      exclude: /node_modules/,
      options: {
        appendTsSuffixTo: [/.vue$/]
      }
    }
  ]
}

項(xiàng)目根路徑下添加文件tsconfig.json，官方推薦配置如下：

// tsconfig.json
{
  "compilerOptions": {
    // 與 Vue 的瀏覽器支持保持一致
    "target": "es5",
    // 這可以對(duì) `this` 上的數(shù)據(jù)屬性進(jìn)行更嚴(yán)格的推斷
    "strict": true,
    // 如果使用 webpack 2+ 或 rollup，可以利用 tree-shake:
    "module": "es2015",
    "moduleResolution": "node"
  }
}

src目錄下添加文件vue-shim.d.ts：

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

意思是告訴TypeScript *.vue后綴的文件可以交給vue模塊來(lái)處理。

從src/main.js開始，包括src/router/index.js等逐一從.js重命名為.ts

注意：重命名后對(duì)vue文件的import，需添加.vue后綴

因?yàn)門ypescript默認(rèn)只識(shí)別*.ts文件，不識(shí)別*.vue文件

之前：

import App from "./App"
import HelloWorld from "@/components/HelloWorld"

需改為：

import App from "./App.vue"
import HelloWorld from "@/components/HelloWorld.vue"

要點(diǎn)：

npm run dev

至此運(yùn)行項(xiàng)目，即可正常運(yùn)行，vue對(duì)typescript的初步引入，基本完成。

npm i --save-dev tslint tslint-loader tslint-config-standard

// ./build/webpack.base.conf.js
module: {
  rules: [
    // {
    //   test: /.(js|vue)$/,
    //   enforce: "pre",
    //   exclude: /node_modules/,
    //   use: {
    //     loader: "eslint-loader",
    //     options: {
    //       formatter: require("eslint-friendly-formatter")
    //     }
    //   }
    // },
    {
      test: /.ts$/,
      exclude: /node_modules/,
      enforce: "pre",
      loader: "tslint-loader"
    },
    {
      test: /.vue$/,
      loader: "vue-loader",
      options: vueLoaderConfig
    },
  ]
}

// ./build/vue-loader.conf.js

const merge = require("webpack-merge")

module.exports = {
  loaders: merge(utils.cssLoaders({
      sourceMap: isProduction
        ? config.build.productionSourceMap
        : config.dev.cssSourceMap,
      extract: isProduction
    }), {
      ts: ["ts-loader", "tslint-loader"]
    }
  ),
  ... // 其他內(nèi)容
}

// tslint.json
{
  "extends": "tslint-config-standard",
  "globals": {
    "require": true
  },
  "rules": {
    "no-consecutive-blank-lines": false
  }
}