TypeScript Basic Tutorial (8)

TypeScript

TypeScript Basic Tutorial

发布日期: 2020-02-29

更新日期: 2020-06-14

文章字数: 1.9k

阅读时长: 9 分

阅读次数:

泛型

泛型：软件工程中，我们不仅要创建一致的定义良好的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表增加数据

定义一个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);

相关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);