Typescript中的泛型

泛型的定义

泛型: 软件工程中，我们不仅要创建一致的定义良好的api, 同时也要考虑可重用行。组件不仅能支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时提供了十分灵活的功能。

在像c#和java中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。

通俗理解，泛型就是解决类、接口、方法的复用性，以及对不特定数据类型的支持。

泛性函数

要实现传入的类型和返回类型一致的需求。

如果用any实现，则放弃了类型校验的功能，即传入number类型时，可以返回string类型,或者传入string类型时，可以返回nuber类型.

此时可以用泛性函数实现，T可以用其它字母代替，一般用T。

function getValue<T>(value:T):T{
    return value;
}

console.log(getValue<number>(12345));  //输出: 12345
console.log(getValue<string>("value"));    //输出: value

类的泛型

1. 要求：最小堆算法，需要同时支持返回数字和字符串两种类型

//不通过泛型类，只返回number的实现
class MinClass{
    public list:Array<number>=[];
    
    addValue(num:number){
        this.list.push(num);
    }

    getMinValue():number{
        var min = this.list[0];
        for(var i=1;i<this.list.length;i++){
            if (this.list[i]<min){
                min = this.list[i];
            }
        }
        return min;
    }
}

let m = new MinClass();
m.addValue(1);
m.addValue(2);
m.addValue(3);
m.addValue(4);
m.addValue(5);
m.addValue(0);
console.log('the min number is '+m.getMinValue()+' .'); //输出: the min number is 0 .

//通过类泛型实现，支持number和string两种类型
class MinClass<T>{
    public list:Array<T>=[];
    
    addValue(num:T){
        this.list.push(num);
    }

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

let m = new MinClass<number>(); //实例化类，并指定类的T代表的是number类型
m.addValue(1);
m.addValue(2);
m.addValue(3);
m.addValue(4);
m.addValue(5);
m.addValue(0);
console.log('the min number is '+m.getMinValue()+'.');  //输出: the min number is 0.

let m1 = new MinClass<string>(); //实例化类，并指定类的T代表的是string类型
m1.addValue('c');
m1.addValue('a');
m1.addValue('z');
console.log('the min string is '+m1.getMinValue()+".")  //输出: the min string is a.

2. 把泛型类作为参数，约束数据输入

/*
定义一个User类，映射User数据库字段
定义一个ArticalCate类，映射ArticalCate数据库字段
定义一个MysqlDb类，用于操作数据库
把User类作为参数传入到MysqlDb中
*/
//不使用泛型类实现
class User{
    username: string | undefined;
    password: string | undefined;
}

class MysqlDb1{
    add(info:User):boolean{
        console.log(info);
        return true;
    }
}

let usr = new User();
usr.username = "abby";
usr.password = "12345678"
let db1= new MysqlDb1();
db1.add(usr);
/*
输出结果:
User
password: "12345678"
username: "abby"
 */

class ArticalCate{
    title: string | undefined;
    desc: string | undefined;
    status: number | undefined;
}
class MysqlDb2{
    add(info: ArticalCate):boolean{
        console.log(info);
        return true;
    }
}
let art = new ArticalCate();
art.title = "book";
art.desc = "childen book"
art.status = 100;

let db2= new MysqlDb2();
db2.add(art);
/*
输出结果:
ArticalCate
desc: "childen book"
status: 100
title: "book"
 */

//使用泛型类实现
class User{
    username: string | undefined;
    password: string | undefined;
}

class ArticalCate{
    title: string | undefined;
    desc: string | undefined;
    status: number | undefined;
    constructor(params:
        {title: string | undefined,
         desc: string | undefined,
         status : number | undefined
        })
    {
        this.title = params.title;
        this.desc = params.desc;
        this.status = params.status;  
    }
}

class MysqlDb<T>{
    add(info:T):boolean{
        console.log(info);
        return true;
    }
}

let usr = new User();
usr.username = "abby";
usr.password = "12345678"
let db1= new MysqlDb<User>();
db1.add(usr);

let art = new ArticalCate({title:'book',desc:'children book',status:100});
let db2 = new MysqlDb<ArticalCate>();
db2.add(art);
/*
输出结果:
User {username: "abby", password: "12345678"}
ArticalCate {title: "book", desc: "children book", status: 100}
 */

泛型接口

//不通过泛型接口的函数接口
interface FunConfig{
    (value:string, name:string):string;
}

var setFunc:FunConfig = function(value:string,name:string):string{
    return value+name;
}
console.log(setFunc("zhangsan","666"))    //输出: zhangsan666

//泛型接口，写法1
interface FunConfig{
    <T>(value:T):T;
}

var setFunc:FunConfig= function<T>(value:T):T{
    return value;
}
console.log(setFunc<string>("zhangsan"))    //输出: zhangsan

//泛型接口, 写法2
interface FunConfig<T>{
    (value:T):T;
}

function setFunc<T>(value:T):T{
    return value;
}

let mySetFunc:FunConfig<string> = setFunc;
console.log(mySetFunc("zhangsan"))    //输出: zhangsan