• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

6、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);

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript学习笔记(六) - 模块发布时间:2022-07-18
下一篇:
three-orbitcontrols TypeScript example发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap