vue-cli4.0+ts+element构建项目_[attr: string]: any;-CSDN博客

本文链接：https://blog.csdn.net/wodebokecsdn/article/details/109073583

本文介绍了在Vue项目中如何使用TypeScript的接口Interface和枚举Enum。通过示例详细阐述了Interface如何约束函数参数，确保数据类型正确，以及如何利用Enum创建枚举类型。在实际开发中，这些特性有助于提高代码的可读性和稳定性。

摘要由CSDN通过智能技术生成

创建项目的过程就不介绍了，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 //任意属性
  }