在Vue2，Vue-cli中使用Typescript須要的配置

公司的團隊最近熱衷於vue框架，新項目想着練練typescript，因而開始了vue+ts的踩坑之路...
本文意在爲和我有同樣想法的夥伴們省去踩坑的時間

---

1.初步配置

首先安裝官方插件vue-class-component，vue-property-decorator，配置webpack。
webpack配置以下：
修改入口文件

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

resolve部分：

extensions: ['.js', '.vue', '.json', '.ts', '.tsx']

配置loader

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

配置tsconfig.json

{
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ],
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "module": "es2015",
    "target": "es5",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "isolatedModules": true,
    "lib": [
      "dom",
      "es5",
      "es2015.promise"
    ],
    "sourceMap": true,
    "pretty": true
  }
}

2.實戰！
配好配置只是第一步，在項目裏跑起來纔是王道。
在vue文件的script標籤裏添加lang='ts'
由於ts-loader不像配過loader的webpack同樣知道vue,html等文件是什麼東西，你跑起來後會報模塊沒法解析的錯誤，因此還須要配置.d.ts聲明文件
vue的以下配置

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

你也能夠爲其它的非js模塊配置.d.ts文件
如html（告訴ts-loader把html理解成字符串）

declare module "*.html" {
  let template: string;
  export default template;
}

配置好以後ts就能理解這些模塊了
從vue-property-decorator引入須要用到的模塊
（通常只用到Component, Vue, Watch, Prop這四個，其它3個沒用到也沒研究，知道的大佬能夠解釋下。）
import { Component, Vue, Watch } from 'vue-property-decorator'
這裏拿以前寫的sidbar的代碼當個栗子：

class HoverTopElem {
  leaveTop: number = -200
  top: number = null
  height: number = null

  show(e) {
    this.top = e.target.getBoundingClientRect().top
    this.height = e.target.clientHeight
  }
  hidden() {
    this.top = this.leaveTop
  }
}

@Component({
  name: 'sidebar',
  template: template,
  components: {
    sidebarItem
  }
})
export default class Sidebar extends Vue {
  SidebarMenu: any = SidebarMenu
  hoverTopElem: HoverTopElem = new HoverTopElem()
  activeListItemName: string = null
  activeRouteItemRoute: string = null

  get _activeRouteItemRoute(): string {
    return this.$route.path
  }

  @Watch('_activeRouteItemRoute', { immediate: true })
  onRouteChanged(val: any) {
    this.activeRouteItemRoute = val
  }

  changeList(param) {
    this.activeListItemName = param
  }

  changeRoute(param) {
    this.activeRouteItemRoute = param
  }
}

元數據寫在@Component配置裏，像名字，用到的組件啥的，而後說下以前vue裏用到的各個實例屬性方法在這裏怎麼用：

data: 這個是最經常使用的，像上面的SidebarMenu（這裏一共聲明瞭4個），注意這裏聲明的
變量必定要賦一個值，沒有就null,不能是undefined，否則這個數據就不是響應的。所以HoverTopElem類裏的屬性也是要有初始值，否則這些屬性也不是響應的

computed: 這裏就是get函數，注意tsconfig.jsonp不配置"target": "es5"這裏會報錯

prop: vue-property-decorator裏面有Prop模塊，也能夠在元數據聲明這個prop，而後在類裏聲明一下這個變量就能夠了，我的推薦第一種

watch: vue-property-decorator裏的Watch模塊

methods: 方法像data同樣直接寫在類裏就能夠了（注意不要和週期鉤子同名）
各類生命週期鉤子: 直接寫就行
路由鉤子見vue-class-component文檔

至此，基本就能夠像原來同樣寫vue組件了。

固然若是要想和原來同樣寫ts,還須要配置tslint,vue-cli自帶的eslint不識別一些ts語法，像public修飾符之類的，致使編譯失敗，由於ts還不是很熟練就沒想着配，有興趣的朋友能夠試試。