ts中接口的用法

ts中的接口主要的作用是：

• 对“对象”进行约束描述
• 对“类”的一部分行为进行抽象

一、属性接口

接口中可定义 确定属性、可选属性、任意属性、只读属性

1、确定属性

interface UserInfo {
  name: string;
  age: number;
}

const myInfo: UserInfo = {
  name: "haha",
  age: 20
};

接口中约束好的确定属性，定义对象变量的时候 不能少

2、可选属性

interface UserInfo {
  name: string;
  age: number;
  sex?:string 
}

const myInfo: UserInfo = {
  name: "haha",
  age: 20
};

接口中的可选属性，是表示在对象变量中可以不存在

3、任意属性

interface UserInfo {
  name: string;
  age: number;
  sex?:string ;
  [propName: string]:any;
}

const myInfo: UserInfo = {
  name: "haha",
  age: 20,
  test1: 'lala',
  test2: 'ff',
  test3:123
};

注：一旦定义了任意属性，那么确定属性和可选属性的类型都必须是任意属性类型的子类；

定义了任意属性后，对象变量中的属性个数才可以出现比接口的属性数量多的情况

4、只读属性

interface UserInfo {
  readonly id: number;
  name: string;
  age: number;
  sex?: string;
  [propName: string]: any;
}

const myInfo: UserInfo = {
  id: 1,
  name: "haha",
  age: 20,
  test1: "lala",
  test2: "ff",
  test3: 123
};

只读属性也是确定属性，在对象变量定义的时候必须有值，此后不能修改

 二、函数接口

对方法传入的参数以及返回值进行约束

interface Func {
  (param1: string, param2: number): boolean;
}
let myFunc: Func = function(param1, param2){
  return typeof param1 === "string" && typeof param2 === "number";
};
myFunc("22222", 1111);

三、索引接口（不常用）

可对数组或对象进行约束

interface ArrIndex {
    [index:number]: string
}
interface Obj {
　　[index:string]:string
}
let myArr: ArrIndex = ['first','second']
let myObj:Obj = {
　　name: 'kkkk'
}

 四、类接口

对类进行约束，和抽象类有点相似

•  类实现接口implements
• 接口继承接口
• 接口继承类