TypeScript-Learning-Series-08


泛型

泛型:软件工程中,我们不仅要创建一致的定义良好的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表示泛型,具体什么类型是调用这个方法的时候决定的
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());
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())

泛型接口

  • 函数类型接口
interface ConfigFn{
  (value1:string,value2:string):string;
}

var setData:ConfigFn=function(value1:string,value2:string):string{
  return value1+value2;
}
setData('name','张三');
  • 泛型接口 第一种
interface ConfigFn{
  <T>(value:T):T;
}

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

// getData<string>('张三');
// getData<string>(1243);  //错误
  • 泛型接口 第二种
    interface ConfigFn<T>{
    (value:T):T;
    }
    

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

var myGetData:ConfigFn=getData;
myGetData(‘20’); /正确/
// myGetData(20) //错误


### 泛类
泛类:泛型可以帮助我们避免重复的代码以及对不特定数据类型的支持(类型校验),下面我们看看把类当做参数的泛型类

1. 定义个类
2. 把类作为参数来约束数据传入的类型

```typescript
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 m1=new MinClass();   
m1.add(11);
m1.add(3);
m1.add(2);
alert(m1.min())
  • 类的泛型
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())

定义一个User的类这个类的作用就是映射数据库字段
然后定义一个 MysqlDb的类这个类用于操作数据库
然后把User类作为参数传入到MysqlDb中

var user=new User({
    username:'张三',
    password:'123456'
})

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

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

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

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

var u=new User();
u.username='张三';
u.pasword='123456';
var Db=new MysqlDb();
Db.add(u);
class ArticleCate{
    title:string | undefined;
    desc:string | undefined;
    status:number | undefined
}

class MysqlDb{
    add(info:ArticleCate):boolean{
        console.log(info);
        console.log(info.title);
        return true;
    }
}

var a=new ArticleCate();
a.title="国内";
a.desc="国内新闻";
a.status=1;
var Db=new MysqlDb();
Db.add(a);

上述这种写法的问题:代码重复

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

    updated(info:T,id:number):boolean {
        console.log(info);  
        console.log(id); 
        return true;
    }
}

想给User表增加数据

  1. 定义一个User类 和数据库进行映射
class User{
    username:string | undefined;
    pasword:string | undefined;
}

var u=new User();
u.username='张三';
u.pasword='123456';
var Db=new MysqlDb<User>();
Db.add(u);
  1. 相关ArticleCate增加数据 定义一个ArticleCate类 和数据库进行映射
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:'1111',
    status:1
});
//类当做参数的泛型类
var Db=new MysqlDb<ArticleCate>();
Db.add(a);
  • 修改数据
var a=new ArticleCate({
        title:'分类111',
        desc:'2222'      
});

a.status=0;
var Db=new MysqlDb<ArticleCate>();
Db.updated(a,12);

实例:封装统一操作的

  • 功能:定义一个操作数据库的库 支持 Mysql Mssql MongoDb
  • 要求1:Mysql MsSql MongoDb功能一样 都有 add update delete get方法
  • 注意:约束统一的规范、以及代码重用
  • 解决方案:需要约束规范所以要定义接口 ,需要代码重用所以用到泛型

1.接口:在面向对象的编程中,接口是一种规范的定义,它定义了行为和动作的规范
2.泛型: 通俗理解:泛型就是解决 类 接口 方法的复用性

interface DBI<T>{
    add(info:T):boolean;
    update(info:T,id:number):boolean;
    delete(id:number):boolean;
    get(id:number):any[];
}

定义一个操作mysql数据库的类 注意:要实现泛型接口 这个类也应该是一个泛型类\

class MysqlDb<T> implements DBI<T>{
    constructor(){
        console.log('数据库建立连接');
    }

    add(info: T): boolean {
        console.log(info);
        return true;
    }
    update(info: T, id: number): boolean {
        throw new Error("Method not implemented.");
    }

    delete(id: number): boolean {
        throw new Error("Method not implemented.");
    }

    get(id: number): any[] {
        var list=[
            {
                title:'xxxx',
                desc:'xxxxxxxxxx'
            },
            {
                title:'xxxx',
                desc:'xxxxxxxxxx'
            }
        ]
        return list;
    }
}

定义一个操作mssql数据库的类

class MsSqlDb<T> implements DBI<T>{
    constructor(){
        console.log('数据库建立连接');
    }

    add(info: T): boolean {
        console.log(info);
        return true;
    }    

    update(info: T, id: number): boolean {
        throw new Error("Method not implemented.");
    }

    delete(id: number): boolean {
        throw new Error("Method not implemented.");
    }

    get(id: number): any[] {
        var list=[
            {
                title:'xxxx',
                desc:'xxxxxxxxxx'
            },
            {
                title:'xxxx',
                desc:'xxxxxxxxxx'
            }
        ]
        return list;
    }
}

操作用户表 定义一个User类和数据表做映射

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

var u=new User();
u.username='张三111';
u.password='123456';
var oMysql=new MysqlDb<User>(); //类作为参数来约束数据传入的类型 
oMysql.add(u);
class User{
    username:string | undefined;
    password:string | undefined;
}

var u=new User();
u.username='张三2222';
u.password='123456';
var oMssql=new MsSqlDb<User>();
oMssql.add(u);

//获取User表 ID=4的数据
var data=oMssql.get(4);
console.log(data);

文章作者: Chaoqiang
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Chaoqiang !
评论
 上一篇
DotNet-Advanced-Series-5-1-NetCore31Start DotNet-Advanced-Series-5-1-NetCore31Start
介绍基本的Net Core跨平台知识 搭建一个小的Net Core项目 入门Net Core
下一篇 
TypeScript-Learning-Series-07 TypeScript-Learning-Series-07
接口接口的作用:在面向对象的编程中,接口是一种规范的定义,它定义了行为和动作的规范,在程序设计里面,接口起到一种限制和规范的作用。接口定义了某一批类所需要遵守的规范,接口不关心这些类的内部状态数据,也不关心这些类里方法的实现细节,它只规定这
  目录