在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还不是很熟练就没想着配，有兴趣的朋友能够试试。