Typescript之接口(Interface)

我们可以通过Interface关键字来定义限制数据的类型。

1.给对象定义类型

/**
 * 定义一种类型，名称叫做PersonInfo，里面有三个属性
 * @name 人物的名字,类型为string
 * @age 人物的年龄，类型为number
 * @say 人物的方法，类型为函数类型，函数传递一个参数，参数类型为string，返回值类型为void
 */
interface PersonInfo{
  name:string,
  age:number
  say:(content:string)=>void
}

使用定义好的PersonInfo类型

/**
 * 定义p1的类型是PersonInfo类型的变量，所以p1只能有name,age,say三个属性
 * 且name必须是string，age必须是number，say必须是定义的函数类型
 */
const p1 : PersonInfo ={
  name:'小明',
  age:18,
  say(content){
    console.log(content);
  }
}

console.log(p1.name);
console.log(p1.age);
console.log(p1.say('饿了！'));

2.定义数组类型

//用于对象
let newObj :ArrType = {
  0:0,
  1:'1'
}

/**
 * ArrType中0,1可以用于表示数组的下标,也可以用于表示对象的属性0和1
 * 用在数组中表示数组的第一个元素是number类型，第二个元素是string类型
 */
interface ArrType{
  0:number,
  1:string
}
let newArr : ArrType = [0,'1'];

3.定义数组中的元素的类型(常用)

/**
 *  PersonGender是定义的枚举类型，其中有两个值，MALE和FEMALE
 */
enum PersonGender{
  MALE = "女",
  FEMALE = "男"
}


/**
 * ArrElementType接口中有三个属性
 * @name : string类型
 * @age : number类型
 * @gender : 枚举类型(PersonGender)
 */
interface ArrElementType {
 name: string;
 age: number;
 gender: PersonGender;
}



/**
 * let arrElement: ArrElementType 表示定义一个ArrElementType类型的变量
 * let arrElement: ArrElementType[] 表示定义一个ArrElementType类型的数组，数组中的每个元素类型都是ArrElementType
 */
let arrElement: ArrElementType[] = [
 {
  name: "菲菲",
  age: 18,
  gender: PersonGender.MALE,
 },
 {
  name: "铭铭",
  age: 19,
  gender: PersonGender.FEMALE,
 },
];

console.log(arrElement);

输出结果：

 

 

这个方法在工作中经常可以用到，比如后端返回的某个人物或者其它的信息，一般都是可以拿到数组结果的data，里面每个元素都是{}这种形式的，我们可以根据后台返回的数据，设置数据的类型，传给UI组件。