6、typeScript中的泛型

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

typeScript中的泛型

1、泛型定义

2、泛型函数

3、泛型类

4、泛型接口

5、把类作为参数类型的泛型类

1、泛型定义：　　

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

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

通俗理解：泛型就时解决类接口方法的可复用型。以对不特定的数据类型的支持（类型校验）。

同时返回string类型和number类型 (代码冗余)

function getData1(value:string):string{
    return value
}
function getData2(value:number):number{
    return value
}

同时返回string类型和number类型。

any可以解决这个问题，但是any放弃了类型检查。

传入的参数类型和返回的数据类型可以不一致

function getData3(value:any):any{
    return '哈哈哈'
}
alert(getData3('str'))
alert(getData3(111))

泛型：可以支持不特定的数据类型要求：传入的参数和返回的参数一致

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

2、泛型函数

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

getData<number>(123456);
getData<number>('123456');//错误写法
getData<string>('12365478899');
getData<boolean>(true);

function getData<T>(value:T):any{//返回任意类型
    return '852';
}

3、泛型类

泛型类：比如有个最小堆算法，需要同时支持数字和字母a-z两种类型

普通写法

class MinClass{
    public list:number[]=[];
    add(num:number){
        this.list.push(num);
    }
    min():number{
        var minNum=this.list[0];
        for (let i = 0; i < this.list.length; i++) {
            const element = this.list[i];
            if(minNum>element){
                minNum = element;
            }
        }
        return minNum;
    }
}

var m = new MinClass();
m.add(3);
m.add(300);
m.add(50);
m.add(1);
m.add(111);
alert(m.min());//1

泛型类实现

class MinClass<T>{
    public list:T[]=[];
    add(num:T):void{
        this.list.push(num);
    }
    min():T{
        var minNum=this.list[0];
        for (let i = 0; i < this.list.length; i++) {
            const element = this.list[i];
            if(minNum>element){
                minNum = element;
            }
        }
        return minNum;
    }
}

var m = new MinClass<number>();/*实例化类 并且定制了类的T代表的类型时number*/
m.add(3);
m.add(300);
m.add(50);
m.add(1);
m.add(111);
alert(m.min());//1

var m1 = new MinClass<string>();/*实例化类 并且定制了类的T代表的类型时string*/
m1.add('a');
m1.add('z');
m1.add('b');
m1.add('t');
m1.add('g');
alert(m1.min());//'a'

4、泛型接口

普通接口

interface ConfigFn{
  (value1:string,value2:string):string;
}

var setData:ConfigFn=function(value1:string,value2:string){
  return value1+value2;
}

console.log(setData('name','温少昌'))

泛型接口 - 第一种写法

interface ConfigFn{
  <T>(value:T):T;
}
var getData:ConfigFn=function<T>(value:T){
  return value;
}
getData<string>('张三');
//getData<string>(123456);//错误写法
//getData<number>('李四');//错误写法

泛型接口 - 第二种写法

interface ConfigFn<T>{
  (value:T):T;
}
function getData<T>(value:T):T{
  return value;
}
var myGetData:ConfigFn<string> = getData;
myGetData('20');//正确
//myGetData(20);//错误

5、把类作为参数类型的泛型类

把类作为参数来约束数据传入的类型

class User{
  username:string | undefined;
  password:string | undefined;
}

class MysqlDb{
  add(user:User){
    console.log(user);
    return true;
  }
}

var u = new User();
u.username = 'root';
u.password = '123456';

var Db = new MysqlDb();
Db.add(u);

操作数据库的泛型类给User表增加数据

/* 操作数据库的泛型类 */
class MysqlDb<T>{
  add(info:T):boolean{
    console.log(info);
    return true;
  }
}

/* 想给User表添加数据 */
class User{
  username:string | undefined;
  password:string | undefined;
}
var u = new User();
u.username = 'root';
u.password = '123456';
var Db = new MysqlDb<User>();
Db.add(u);

class ArticleCate{
  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;
  }
}

var a=new ArticleCate({
  title:'分类',
  desc:'这是一个无敌的设备。',
  status:1
})

// 类当做参数的泛型类
var Db = new MysqlDb<ArticleCate>();
Db.add(a);