是一种规范的定义，定义了行为和动作的规范

自定义方法传参约束

function printLabel(labelInfo: {label:string}):void {
    console.log(labelInfo.label)
}
let labelInfo = {
    label: 'mklmkl'
}
printLabel(labelInfo)

传的实参类型必须和形参类型一致

1、属性类接口

// 传入对象的约束  属性接口
interface FullName {
    firstName: string;
    secondName: string;
    thirdName?: string; //可选参数,可传可不传
}
//传入的参数必须包含只接口里面定义的属性
function printName(name: FullName){
    console.log(name.firstName,name.secondName)
    console.log(name.age)//报错
}
let obj = {
    age: 20,
    firstName: 'zhangsan',
    secondName: 'lisi'
}
printName(obj)

举例：原生js封装ajax

interface Config {
    type: string;
    url: string;
    data?:string;
    dataType:string;
}

function ajax(config: Config) {
    var xhr = new XMLHttpRequest();
    xhr.open(config.type,config.url,true);
    xhr.send(config.data);
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            console.log('success');
            if(config.dataType == 'json'){
                console.log(JSON.parse(xhr.responseText))
            }else {
                console.log(xhr.responseText)
            }
        }
    }
}
ajax({
    type:'get',
    data:'name=zhangsan',
    url:'http://www.baidu.com',
    dataType: 'json'
})

2、函数类型接口

加密函数类型接口 对方法传入的参数以及返回类型做约束

interface encrypt{
    (key:string,value:string): string;
}
var md5:encrypt = function(key:string,value:string):string{
    return key + value;
}
console.log(md5('name','zhangsan'))

3、可索引接口(数组对象的约束)

对数组的约束

// 可索引接口,对数组的约束
interface UserArray{
    //索引值(必须是number类型),value(可以是任何类型)
    [index:number]: string
}

var arr2:UserArray = ['46546','45453'];
var arr3:UserArray = [46,'45453'];//错误写法
console.log(arr2[0]);//46546

对对象的约束

interface UserObject{
    //索引值(必须是string类型),value(可以是任何类型)
    [index:string]: string
}
var obj:UserObject = {
    name: 'ewqeq'
}
var obj2:UserObject = ['cdscs','4564'];//错误写法

4、类类型接口

对类类型接口：对类的约束，类似于抽象类

定义一个类，其他类实现这个类的时候的一些约束

interface Animal {
    name:string;
    eat(str:string):void;
}
// Dog类实现Animal接口
class Dog implements Animal{
    name: string;
    constructor(name:string){
        this.name = name;
    }
    eat(){
        return this.name;
    }
}
var d = new Dog('旺旺');
console.log(d.eat());//旺旺

// Cat类实现Animal接口
class  Cat implements Animal {
    name: string;
    constructor(name:string){
        this.name = name;
    }
    eat(food:string){
        return this.name+food;
    }
}
var c = new Cat('喵喵');
console.log(c.eat('fish'));//喵喵fish

5、接口扩展(接口可以继承接口)

interface Animal {
    eat():void;
}

interface Person extends Animal {
    name: string;   
    work():void; 
}
//类实现接口的时候,也要实现接口的父类方法
class Web implements Person{
    name:string;
    constructor(name) {
        this.name = name;
    }
    eat(){
        console.log(this.name+'eee')
    }
    work(){
        console.log(this.name+'www')
    }
}
var w = new Web('web');
console.log(w.eat(),w.work());//webeee webwww

class Programmer {
    public name:string;
    constructor(name:string) {
        this.name = name;
    }
    coding(code:string){
        console.log(this.name+code)
    }
}

class Web2 extends Programmer implements Person {
    constructor(name) {
        super(name)
    }
    eat(){
        console.log('web2')
    }
    work(){
        console.log('web2')
    }
}
var w2 = new Web2('xiaoli');
console.log(w2.coding(' coding ts'));//xiaoli coding ts