vue-cli4.0+ts+element构建项目

创建项目的过程就不介绍了，vue create 项目名字 ，然后选最下面的自己配置所需要的东西即可，这里主要讲typeScript的使用方式。

3各项配置设置

操作方式

按方向键进行上下选择
按空格 选中
按A键全选
按I键全选
按enter 确认所有配置进入下一步

1.interface

是对值所具有的结构进行类型检查，当创建一个带有参数的函数，或者调用接口传参数时，为了能够清晰的知道所需参数的属性和类型，我们就可以用interface来进行约束，如果传错了，在编译过程中会报错。

首先看一下项目结构

我们以alarmInter.ts为例

我们要查询分类数据，参数有一个subjectId，类型为number。

/**
 * @description 查找分类
 */
export interface SerchClass {
    subjectId: number,
    // name?:string,//可有可无，有的话是string类型
    // [attr: string]: any //任意属性
}

这样我们在使用的时候

import { SerchClass } from '@/assets/js/interfaces/alarm/alarmInter'

/**
 * @description 获取分类
 */
getClassfy(){
  const params:SerchClass = {
     subjectId:88
  }
  this.$axios.get('index/statics',{params});
}

上面我们定义了一个接口，属性为subjectId，值的类型为number  如果我们将sunjectId的值改为字符串，则编译时会出现报错提示

如果我们属性值写成其他的，则会提示缺少咱们接口中定义的subjectId字段。

如果说我们还需要其他的字段，并且字段可有可无，那我们就可以这样定义

/**
 * @description 查找分类
 */
export interface SerchClass {
    subjectId: number,
    name?:string,//可有可无，有的话是string类型
    [attr: string]: any //任意属性
  }

2、枚举 enum

ts的枚举看这里