Question

5.1 定义 ajax 请求数据接口

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

5.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'));



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

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

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

5.3 可索引接口：数组、对象的约束（不常用）

5.3.1 可索引接口-对数组的约束

interface UserArr{
    [index:number]:string
}


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

console.log(arr[0]);

5.3.2 可索引接口-对对象的约束

interface UserObj{
    [index:string]:string
}

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

5.3.3 类类型接口:对类的约束

• 抽象类抽象有点相似

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

class Dog implements Animal{

    name:string;
    constructor(name:string){

        this.name=name;

    }
    eat(){

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


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


class Cat implements Animal{
    name:string;
    constructor(name:string){

        this.name=name;

    }
    eat(food:string){

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

var c=new Cat('小花');
c.eat('老鼠');

5.4 接口的扩展

接口继承接口 类实现接口

interface Animal{
    eat():void;
}

interface Person extends Animal{

    work():void;
}


class Programmer{

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

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


class Web extends Programmer implements Person{
    
    constructor(name:string){
       super(name)
    }
    eat(){

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

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

var w=new Web('小李');

// w.eat();

w.coding('写 ts 代码');

5.5 泛型类接口

5.5.1 泛型类 泛型方法

• 泛型：软件工程中，我们不仅要创建一致的定义良好的 API ，同时也要考虑可重用性。 组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。
• 在像 C# 和 Java 这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。 这样用户就可以以自己的数据类型来使用组件。
• 通俗理解：泛型就是解决类接口方法的复用性、以及对不特定数据类型的支持（类型校验)

// 只能返回 string 类型的数据
function getData(value:string):string{
    return value;
}

// 同时返回 string 类型 和 number 类型  （代码冗余）
function getData1(value:string):string{
    return value;
}
function getData2(value:number):number{
    return value;
}

//同时返回 string 类型 和 number 类型  any 可以解决这个问题


 function getData(value:any):any{
    return '哈哈哈';
}


getData(123);
getData('str');

//any 放弃了类型检查，传入什么 返回什么。比如:传入 number 类型必须返回 number 类型  传入 string 类型必须返回 string 类型


//传入的参数类型和返回的参数类型可以不一致
function getData(value:any):any{
  return '哈哈哈';
}

T 表示泛型，具体什么类型是调用这个方法的时候决定的

// T 表示泛型，具体什么类型是调用这个方法的时候决定的

function getData<T>(value:T):T{
   return value;
}
getData<number>(123);

getData<string>('1214231');


getData<number>('2112');       /*错误的写法*/

function getData<T>(value:T):any{
   return '2145214214';
}

getData<number>(123);  //参数必须是 number

getData<string>('这是一个泛型');

泛型类

泛型类：比如有个最小堆算法，需要同时支持返回数字和字符串 a - z 两种类型。 通过类的泛型来实现

// 基本写法 但是不能传入字符串
class MinClass{
    public list:number[]=[];
    add(num:number){
        this.list.push(num)
    }
    min():number{
        var minNum=this.list[0];
        for(var i=0;i<this.list.length;i++){
            if(minNum>this.list[i]){
                minNum=this.list[i];
            }
        }
        return minNum;
    }

}

var m=new MinClass();

m.add(3);
m.add(22);
m.add(23);
m.add(6);

m.add(7);
alert(m.min());

类的泛型

// 通过泛型改写 可以同时传入 number 字符串等
//类的泛型
class MinClas<T>{

    public list:T[]=[];

    add(value:T):void{

        this.list.push(value);
    }

    min():T{        
        var minNum=this.list[0];
        for(var i=0;i<this.list.length;i++){
            if(minNum>this.list[i]){
                minNum=this.list[i];
            }
        }
        return minNum;
    }
}

var m1=new MinClas<number>();   /*实例化类 并且制定了类的 T 代表的类型是 number*/
m1.add(11);
m1.add(3);
m1.add(2);
alert(m1.min())


var m2=new MinClas<string>();   /*实例化类 并且制定了类的 T 代表的类型是 string*/

m2.add('c');
m2.add('a');
m2.add('v');
alert(m2.min())

5.5.2 泛型接口

1. 方式 1

interface ConfigFn{

    <T>(value:T):T;
}


var getData:ConfigFn=function<T>(value:T):T{

    return value;
}


getData<string>('张三');


// getData<string>(1243);  //错误

2. 方式 2

interface ConfigFn<T>{
    (value:T):T;
}


function getData<T>(value:T):T{

    return value;
}


var myGetData:ConfigFn<string>=getData;     


myGetData('20');  /*正确*/


// myGetData(20)  //错误