摘要：進階篇本文是繼新項目起手式之后的進階踩坑配置，所以推薦先行閱讀前文完整閱讀完之后，基本可以順利在新項目中使用了另外特別注意不推薦在已有項目上強加，因寫法的組件跟之前的組件不兼容，若上的話需要修改之前寫的組件配置完整版可參考，若沒配置出來

本文是繼 Vue + TypeScript 新項目起手式 之后的進階+踩坑配置，所以推薦先行閱讀前文  
完整閱讀完之后，基本可以順利在新項目中使用vue + typescript 了

另外特別注意！！！  
不推薦在已有項目上強加 typescript， 因ts寫法的組件跟之前的組件不兼容，若上的話需要修改之前寫的組件

配置完整版可參考 vue-typescript-starter，若沒配置出來，也可以對照修改配置

直接進入正題：

ts 支持 render jsx 寫法

ts 支持 es6 / es67

配置 vuex

vue 識別全局方法/變量

支持 mixin

支持 ProvidePlugin 的全局變量，比如 lodash的_

這里一共分兩步

首先得先讓 vue 支持 jsx 寫法

再讓 vue 中的 ts 支持 jsx 寫法

按照官方做法，安裝Babel 插件

安裝依賴

npm install
  babel-plugin-syntax-jsx
  babel-plugin-transform-vue-jsx
  babel-helper-vue-jsx-merge-props
  babel-preset-es2015
  --save-dev

在.babelrc中添加：

{
  "plugins": ["transform-vue-jsx"]
}

之后就可以這些寫render，如下圖：

首先配置 webpack
找到./build/webpack.base.conf.js

找到resolve.extensions 里面加上.tsx 后綴

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

找到module.rules 修改webpack對.tsx .ts 的解析

  module: {
    rules: [
      {
        test: /.(js|vue)$/,
        loader: "eslint-loader",
        enforce: "pre",
        include: [resolve("src"), resolve("test")],
        options: {
          formatter: require("eslint-friendly-formatter")
        }
      },
        // 從這里復制下面的代碼就可以了
        // 如果之前按照起手式配置的同學，請替換配置
      {
        test: /.tsx?$/,
        exclude: /node_modules/,
        enforce: "pre",
        loader: "tslint-loader"
      },
      {
        test: /.vue$/,
        loader: "vue-loader",
        options: Object.assign(vueLoaderConfig, {
          loaders: {
            ts: "ts-loader",
            tsx: "babel-loader!ts-loader"
          }
        })
      },
      {
        test: /.tsx?$/,
        exclude: /node_modules/,
        use: [
          "babel-loader",
          {
            loader: "ts-loader",
            options: { appendTsxSuffixTo: [/.vue$/] }
          }
        ]
      },
      // 復制截止
      {
        test: /.js$/,
        loader: "babel-loader",
        include: [resolve("src"), resolve("test")]
      },

上面的配置，主要意思是 vue 文件識別ts/tsx代碼的時候，先過一遍ts-loader，在過一遍babel-loader，我知道這聽起來有點蠢，但是jsx不能不要對吧？

然后在 tsconfig.json中，添加對jsx的支持

  "compilerOptions": {
    "jsx": "preserve"
    }

之后就可以順利在.vue單文件中的ts寫jsx代碼了，如下圖所示：

敲黑板，這里又有重點，使用 jsx 寫法的話， 一定要使用 .tsx，不要用.ts了，切記！！！

在 tsconfig.json中，添加對es6 / es7的支持，更多的配置請見tsconfig - 編譯選項

    "lib": [
      "dom",
      "es5",
      "es6",
      "es7",
      "es2015.promise"
    ]

不然的話，連Object.assign 這種最基本的函數也會在ts中報錯，真的令人難過

這里就比較簡單了

# 安裝依賴
npm i vuex vuex-class --save

vuex：在 vue 中集中管理應用狀態

vuex-class ：在 vue-class-component 寫法中 綁定 vuex

Store的配置跟原來一模一樣，引用的時候有一點區別，下面的例子介紹了用法，應該一看便知，這里我不做贅述

import Vue from "vue"
import Component from "vue-class-component"
import {
  State,
  Getter,
  Action,
  Mutation,
  namespace
} from "vuex-class"

const ModuleGetter = namespace("path/to/module", Getter)

@Component
export class MyComp extends Vue {
  @State("foo") stateFoo
  @State(state => state.bar) stateBar
  @Getter("foo") getterFoo
  @Action("foo") actionFoo
  @Mutation("foo") mutationFoo
  @ModuleGetter("foo") moduleGetterFoo

  // If the argument is omitted, use the property name
  // for each state/getter/action/mutation type
  @State foo
  @Getter bar
  @Action baz
  @Mutation qux

  created () {
    this.stateFoo // -> store.state.foo
    this.stateBar // -> store.state.bar
    this.getterFoo // -> store.getters.foo
    this.actionFoo({ value: true }) // -> store.dispatch("foo", { value: true })
    this.mutationFoo({ value: true }) // -> store.commit("foo", { value: true })
    this.moduleGetterFoo // -> store.getters["path/to/module/foo"]
  }
}

在項目中使用 ui 組件是很正常的操作

比如使用 Element-uI 的 meesage，用法如下圖：

  this.$message({
    message: "恭喜你，這是一條成功消息",
    type: "success"
  })

但是在配置了 typescript之后

那是因為 $message屬性，并沒有在 vue實例中聲明

解決辦法也非常簡單，那我們就聲明一下唄

在之前文章中創建的 src/vue-shim.d.ts文件中，增加如下代碼：

// 聲明全局方法
declare module "vue/types/vue" {
  interface Vue {
    $Message: any,
    $Modal: any
  }
}

這樣，之后再使用this.$message()的話就不會報錯了

我在vue-property-decorator里里外外找了好幾圈，缺沒有找到mixin這個修飾器

 // 如果全局mixin，那也太蠢了
 Vue.mixin( mixin )

找非常多的 ts + vue 項目，但是沒有找到我理想的mixin的方式，
那么就自己進行探索咯，下圖是我自己使用的目前最佳mixin方式：

聲明了一個mixin組件，如下圖：

其實就是我在mixin中聲明了聲明屬性 / 方法，那么我就在vue實例中聲明這個屬性 / 方法

使用方式如下圖：

如果我們在項目中有使用 jquery，lodash 這樣的工具庫的時候，肯定不希望在所有用到的地方都import _ from ‘lodash’
@types/lodash

那我們就來配置一下：

首先還是在webpack.base.conf.js 中添加一個插件、并把這個 vendor拉出來

  entry: {
    app: "./src/main.ts",
    vendor: [
      "lodash"
    ]
  }

  plugins: [
    new webpack.ProvidePlugin({
      _: "lodash"
    })
  ]

上面的意思是，當模塊使用這些變量的時候wepback會自動加載

然后，你需要告訴eslint這個 _ 是全局的

在.eslintrc.js中添加

  globals: {
    _: true
  },

接下來，你還需要告訴ts這個 _ 是全局的

在vue-shim.d.ts

declare global {
  const _: typeof lodash
}

如果沒有上面這段聲明，但是在 ts 中使用的話，會報如下的錯誤：

這個問題Consider allowing access to UMD globals from modules · Issue #10178 · Microsoft/TypeScript · GitHub

有一個很簡單的解釋，就是害怕你全局聲明的_ 跟 import _ from "lodash" 的行為不一致，這樣的話，之后會留下隱患

到這里，本文的配置就到此結束

本文的這些配置都是在新項目開發中，一步步用血汗踩出來的

目測已經涵蓋了大部分的使用問題，如果有其他的意見或建議的話，歡迎在本文下面評論~~

再發一次，配置完整版可參考 vue-typescript-starter，若沒配置出來，也可以對照修改配置

在剛上typescript的時候，我是拒絕的，嫌棄每個地方都要聲明類型，不然就走不下去，但是如果讓你們做以下一個選擇題：

在編譯時發現問題

還是運行時發現問題

我會毫不猶豫選擇前者，這是ts強類型帶給我最大的亮點

tsconfig配置

TypeScript體系調研報告 - 掘金