05. typescript接口

// 接口 行为动作的约束

// 1. 属性类接口

interface FullName{
    
    firstName:string; //分号结束

    secondName:string; 

    sex?:string;     //可选参数
}

function printName(name:FullName){

    console.log(name.firstName + '----' + name.secondName)
}

var obj = {
    // age: 20,
    firstName: '张',
    secondName: '三',
    sex: '男'        
}

console.warn('属性类接口');

printName(obj)


//【案例1】ajax接口  start
interface Config{
    type:string;
    url:string;
    data?:string;
    dataType:string;
}

//原生js封装的ajax 
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('chengong');


            if(config.dataType=='json'){

                console.log(JSON.parse(xhr.responseText));
            }else{
                console.log(xhr.responseText)

            }


        }
}
}


ajax({
    type:'get',
    data:'name=zhangsan',
    url:'http://a.itying.com/api/productlist', //api
    dataType:'json'
})

// end

// 2. 函数类型接口:对传入的参数以及返回值类型做约束

// 加密的函数类型接口

interface encrypt{
    (key:string,value:string):string;
}


var md5:encrypt=function(key:string,value:string):string{
        //模拟操作
        return key+value;
}

console.warn('函数类型接口');
 
console.log(md5('name','zhangsan'));



var sha1:encrypt=function(key:string,value:string):string{

    //模拟操作
    return key+'----'+value;
}

console.log(sha1('name','lisi'));

// 3. 可索引接口：数组、对象的约束

    //ts定义数组的方式
    
    // var arr:number[]=[2342,235325]


    // var arr1:Array<string>=['111','222']
    

    //可索引接口 对数组的约束
            interface UserArr{
                [index:number]:string
            }


            var arr:UserArr=['aaa','bbb'];

            console.log(arr[0]);

            // var arr:UserArr=[123,'bbb'];  /*错误*/



    //可索引接口 对对象的约束

        interface UserObj{

            [index:string]:string
        }


        var ob:UserObj={name:'张三'};

// 4. 类类型接口： 对类的约束

console.warn('对类的约束');

interface Animal6{
    name:string;
    eat(str:string):void;
}

class Dog2 implements Animal6{

    name:string;
    constructor(name:string){

        this.name=name;

    }
    eat(){

        console.log(this.name+'吃粮食')
    }
}


var d2=new Dog2('小黑');
d2.eat();


class Cat6 implements Animal6{
    name:string;
    constructor(name:string){

        this.name=name;

    }
    eat(food:string){

        console.log(this.name+'吃'+food);
    }
}

var c6=new Cat6('小花');
c6.eat('老鼠');

// 接口的扩展：接口可以继承
console.warn('接口的扩展：接口可以继承');

interface Animal7{

    eat():void;
}

interface Person7 extends Animal7{

    work():void;
}

class Web7 implements Person7{

    public name:string;
    constructor(name:string){
        this.name=name;
    }

    eat(){

        console.log(this.name+'喜欢吃馒头')
    }
    work(){     // 实现一个接口，必须实现接口中的所有方法。

        console.log(this.name+'写代码');
    }
    
}

var w7=new Web7('小李');

w7.eat();












// interface Animal7{

//     eat():void;
// }

// interface Person7 extends Animal7{

//     work():void;
// }


// class Programmer7{

//     public name:string;
//     constructor(name:string){
//         this.name=name;
//     }
    
//     coding(code:string){

//         console.log(this.name+code)
//     }
// }


// class Web7 extends Programmer7 implements Person7{
    
//     constructor(name:string){
//        super(name)
//     }
//     eat(){

//         console.log(this.name+'喜欢吃馒头')
//     }
//     work(){

//         console.log(this.name+'写代码');
//     }
    
// }

// var w7=new Web7('小李');

// w7.eat();

// w7.coding('写ts代码');