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'
}

四、类的接口

interface Animal {
    name:string;
    run(str?:string):void;
}
//Dog 类要实现 Animal 接口  用关键字  implements  ,该接口规定必须有name属性，必须有run 方法，而且该方法必须没有返回值
class Dog implements Animal {
    name:string
    constructor(name:string){
        this.name=name
    }
    run(){
        console.log('奔跑')
    }
}

接口也可以继承接口

interface Animal {
    name:string
}
//Person接口继承了Animal接口
interface Person extends Animal {
    work(str:string):void
}
//renlei这个类实现Person 接口，就必须有name属性和work方法
class renlei implements Person {
    name:string
    constructor(name:string){
        this.name=name
    }
    work(str:string):void{
        console.log('我在工作')
    }
}

转载请联系作者。原文链接1 原文链接2