Typescript 接口

接口

接口的作用: (定义标准) 在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里面，接口起到一种限制和规范的作用。接口定义了某一批类所需要遵守的规范，接口不关心这些类的内部状态数据，也不关心这些类里方法的实现细节，它只规定这批类里必须提供某些方法，提供这些方法的类就可以满足实际需要。typescript中的接口类似于java, 同时还增加了更灵活的接口类型，包括属性、函数、可索引和类等。

属性接口

以interface关键自定义接口，指定属性名和类型，注意写法.

固定属性接口

//接口：行为和动作的规范，对批量方法进行约束
interface FullName{
    firstName:string;
    secondName:string;
}
function printName(name:FullName):void{
    console.log(`name is ${name.firstName} ${name.secondName}.`)
}

function printInfo(info:FullName):void{
    console.log(`info is ${info.firstName} ${info.secondName}.`)
}

let obj = {firstName: 'Hua', secondName:'abby',age:'18'};  //这种定义方式可以定义interface以外的属性，但不推荐这种方式
printName(obj);  //输出: name is Hua abby.
printInfo(obj);  //输出: info is Hua abby.
printName({firstName:'Gao',secondName:'jason'}); //这种方式必须和interface里面的属性完全一致。 输出:name is Gao jason. 

可选属性接口

可选属性通过 ? 表示.

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

function ajax(config:Config){
    let 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("successfully")
            
            if(config.dataType=='json'){
                console.log(JSON.parse(xhr.responseText));
            }
            else{
                console.log(xhr.responseText);
            }
        }
    }

}

ajax({type: 'get',
url:'http://a.itying.com/api/productlist',  //url为api url
data:'name=zhangsan',
dataType:'json'})
//输出: successfully
//test1.js:302 {result: Array(6)}......

函数接口

对函数的参数和返回值进行约束

//函数接口
interface encrypt{
    (key:string,value:string):string;  //注意写法,没有function关键字
}

//模拟方法
let md5:encrypt = function(key:string, value:string):string{
    return key+value;
}
console.log(md5("zhangsan","test"));  //zhangsantest

//模拟方法
let sha1:encrypt = function (key:string, value:string):string{
    return key+"----"+value;
}
console.log(sha1("lisi",'test2'));  //lisi----test2

可索引接口（对象/数组的约束，不常用）

//可索引接口，对数组的约束
interface userArray{
    [index:number]:string;  //index为nunber, value 为string
}

let array:userArray = ["aaa","bbb"];
console.log(array[0]) //输出: aaa

//可索引进口，对对象的约束
interface userObj{
    [index:string]:string; //index为string, value为string
}

let obj1:userObj = {name: 'aaa', age:'22'};
console.log(obj1.name, obj1.age)  //输出: aaa 22

类类型接口

和抽象类有点相似。
接口里面定义的方法，在实现类中即使属性 不一致也没关系，但是实现类中一定要定义该方法

//类接口实例
interface People{
    name:string;
    eat(food:string):string;
}

class Woman implements People{
    name:string;
    constructor(name:string){
        this.name = name;
    }
    eat(food:string){//函数参数和接口中完全一致
        return this.name+" eat "+food;
    }
}

class Man implements People{
    name:string;
    constructor(name:string){
        this.name = name;
    }
    eat(){//函数参数和接口中不一致，不影响
        return this.name + " eat nothing."
    }
}

let man = new Man("man");
console.log(man.eat());  //输出: man eat nothing.

let woman = new Woman("woman");
console.log(woman.eat("discusious food."))   //输出: woman eat discusious food.

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

//接口继承接口实例
interface Animal{
    eat(food:string):string;
}

interface People extends Animal{
    work(work:string):string;
}

class Developer {
    name:string;
    constructor(name:string){
        this.name = name;
    }
    coding(code:string){
        console.log(`${this.name} is coding ${code}`);
    }
}

class WebDeveloper extends Developer implements People{

    eat(food:string){
        return this.name + ' eat ' +food;
    }
    work(work:string){
        return this.name + "'s work is "+work;

    }
}

let web = new WebDeveloper("abby");
console.log(web.eat('rice'));  //输出: abby eat rice
console.log(web.work('developer'));  //输出: abby's work is developer
web.coding('webcodes');    //输出: abby is coding webcodes