TS03 TS中的各类型接口（详解）

1.TS中的接口

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

1.1 属性类接口

• 1.1.1 一个入门小实例

//TS定义一个函数
function printLabel():void{
    console.log('printLabel')
}

// printLabel();

//约束传入参数为string类型
function printLabel(label:string):void{
    console.log('printLabel')
}

printLabel('haha');


/*
TS自定义方法传入参数对json对象进行约束
传入对象labelinfo中必须要有label属性
*/
function printLabel(labelInfo:{label:string}):void{
    console.log('printLabel')
}

printLabel(
    {}
);
// "类型“{}”的参数不能赋给类型“{ label: string; }”的参数

printLabel({label:'hahah'})

• 1.1.2 属性类接口

//接口：行为和动作的规范，对批量方法进行约束

/**
 * 使用这个方法必须传入firstName  secondName
 */

 interface FullName{
     
    firstName:string;
    
    secondName:string;
 }

 function printName(name:FullName){
    console.log(name.firstName + '---' + name.secondName)
 }


//错误写法1
//  printName(123)


printName({
    firstName:'康',
    secondName:'家豪'
})

• 1.1.3 可选属性接口

//接口：行为和动作的规范，对批量方法进行约束

/**
 * 原始属性接口
 */

interface FullName {

    firstName: string;

    secondName: string;
}

function printName(name: FullName) {
    console.log(name)
}


//这里我传入的对象必须要有 firstName 属性和 secondName 属性
printName({
    firstName: '康',
    secondName: '家豪'
})

// {firstName: "康", secondName: "家豪"}



/**
 * 可选属性接口   配置可选参数
 */

interface FullName2 {

    firstName: string;

    secondName?: string;
}

function printName2(name: FullName2) {
    console.log(name)
}


//这里secondName就是可传可不传了
printName2({
    firstName: '康'
})

// {firstName: "康"}

• 1.1.4 使用ts封装一个ajax

/**
 * 使用TS封装一个ajax
 */

 interface Config{
     type:string;

     url:string;

     data?:any;

     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){
             if(config.dataType == 'json'){
                 console.log(JSON.parse(xhr.responseText))
             }else{
                 console.log(xhr.responseText)
             }
         }
     }
 }


 //使用

 ajax({
     type:'get',
     url:'localhost:3000',
     data:{name:123},
    dataType:'json'
 })

1.2 函数类型接口

函数类型接口：对方法传入的参数 以及返回值进行约束

/**
 * 加密的函数类型接口
 * 对方法传入的参数和返回值进行约束
 */
interface encrypt{
    (key:string,value:string):string;
}

var md5:encrypt = function(key:string,value:string):string{
    //md5算法过程
    return key + value;
}


console.log(md5('name','张三'))

1.3 可索引接口

数组，对象的约束（不常用）

/**
 * TS定义数组的方式
 */

//  var arr:number[] = [1,2,3,4,5]



/**
 * 使用接口来对数组进行约束
 */

 interface userArr{
     //数组索引为number类型  值为string类型
    [index:number]:string
 }

var arr:userArr = ['aaa','ccc'];

console.log(arr[0])



/**
 * 使用接口来对对象进行约束
 */

interface userObj{
   //对象索引为string类型  值为string类型
   [index:string]:string
}

var obj:userObj = {name:'20'}

1.4 类类型接口

对类的约束 和 抽象类有点相似

/**
 * 类类型接口
 * 对类的约束
 */

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

 class Dog implements Animal{
     name:string;
     constructor(name:string){
         this.name = name;
     }

     eat(food:string){
         console.log(this.name +'吃' + food)
     }
 }

 var d = new Dog('小黑');
 d.eat('粮食哦')

1.5 接口拓展

接口可以继承接口

/**
 * 接口拓展
 * 接口的继承
 */

interface Animal{
    eat():void
}

interface Person extends Animal{
    work():void;
}

class web implements Person{
    name:string;
    constructor(name:string){
        this.name = name;
    }

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

    work(){
        console.log(this.name + '喜欢打代码')
    }
}


var p1 = new web('小李')

p1.eat()
p1.work()