TS04 TS中的泛型、泛型类（重要）

TypeScript中的泛型

1.1 泛型的定义

泛型:软件工程中，我们不仅要创建一致的定义 良好的API，同时也要考虑可重用性。组件不仅能够支持当前的数据类
型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。
在像C#和Java这样的语言中，可以使用泛型来创建可重用的组件，’ 个组件可以支持多 种类型的数据。 这样用户就可以
以自己的数据类型来使用组件。
I
通俗理解:泛型就是解决类接口方法的复用性、以及对不特定数据类型的支持。

1.2 泛型函数

/**
 * 泛型的举例
 */

//只能返回string类型的数据
function getData(value: string): string {
    return value;
}

//同时返回string类型和number
//方法1：类型定义两个函数，缺点代码冗余

function getData1(value: string): string {
    return value;
}

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


//方法2：使用any 缺点，相当于放弃了类型检测
function getData3(value: any): any {
    return value;
}


/**
 * 需求：传入什么返回什么类型（传入的参数和返回的参数一致）
 * 例如：传入number返回number  传入string返回string
 * 方法：使用泛型，可以支持不特定的数据类型
 * T表示泛型，具体是什么类型调用这个方法的时候决定的
 */

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

//   调用
console.log(getData4<number>(123));
console.log(getData4<string>('kjh'));


// 同时我们可以任意指定返回的类型参数为any等
function getData5<T>(value: T): any {
    return value;
}

1.3 泛型类

/**
 * 泛型类的举例
 * 泛型类:比如有个最小堆算法，需要同时支持返回数字和字符串两种类型。
 * 通过类的泛型来实现
 */

class minClass {
    public list: number[] = [];

    add(num: number) {
        this.list.push(num);
    }

    minNumber(): 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;
    }
}

//使用minClass
var m = new minClass();
m.add(1)
m.add(2)
m.add(10)
m.add(99)

console.log(m.minNumber());
//1


/**
 * 问题来了，上面我们封装的类不能满足传入字符串返回字符串，传入数字返回数字的要求
 * 方法：使用泛型类解决问题
 */


class minClass2<T>{
    public list:T[] = [];

    add(value:T):void{
        this.list.push(value);
    }

    minNumber():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;
    }
}

//调用泛型类
//实例化类  并且制定了类的T代表的类型是number
var m1 = new minClass2<number>();
m1.add(1)
m1.add(2)
m1.add(3)
console.log(m1.minNumber()); //1


//实例化类  并且制定了类的T代表的类型是string
var m2 = new minClass2<string>();
m2.add('a')
m2.add('b')
m2.add('c')
console.log(m2.minNumber());  //a

1.4 泛型接口

/**
 * 泛型接口
 */

 
 /**
  * 先定义一个函数接口
  * 缺点：只能传入string类型
  */

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

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

 console.log(setData('name','张三'));


 /**
  * 第一种定义泛型的方法
  * 使用泛型接口
  * 要求：按照我们传入的数据类型进行判断
  */

  interface ConfigFn2 {
    <T>(value:T):T;
  }

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

  console.log(getData<string>('张三'));
  console.log(getData<number>(999));


  /**
  * 第二种定义泛型的方法
  * 使用泛型接口
  * 要求：按照我们传入的数据类型进行判断
  */

  interface ConfigFn3<T>{
      (value:T):T;
  }

  var myGetData:ConfigFn3<string> = function<T>(value:T):T{
      return value;
  }

  console.log(myGetData('20'))

2.1 深入泛型类(超级重点)

• 把类作为参数来约束数据传入的类型：定义一个User的类这个类的作用就是映射数据库字段
  然后定义一个MysqlDb的类这个类用于操作数据库，之后把user类作为参数传，入到MysqlDb中

/**
 * 解释：把类作为参数来约束数据传入的类型
 * 定义一个User的类这个类的作用就是映射数据库字段
 * 然后定义一个MysqlDb的类这个类用于操作数据库
 * 后把user类作为参数传，入到MysqlDb中
 */



//User类来映射数据库字段
class User{
    userName:string | undefined;
    passWord:string | undefined;
}

//定义一个MysqlDb的类这个类用于操作数据库
class MySqlDB{
    add(user:User):boolean{
        console.log(user);
        return true;
    }
}


var u = new User();
u.userName = 'admin';
u.passWord = '123456';

var Db = new MySqlDB();
Db.add(u);
//User {userName: "admin", passWord: "123456"}



/**
 * 接下来我们再定义一个文章类
 */

class Article{
    title:string | undefined;
    status:string | undefined;
    desc:string | undefined;
}

//定义一个MysqlDb的类这个类用于操作数据库
class MySqlDB2{
    add(article:Article):boolean{
        console.log(article);
        return true;
    }
}


var a = new Article();
a.title = '时间去哪儿了'
a.status = '200'
a.desc = '宝鸡新闻网'

var Db2 = new MySqlDB2();
Db2.add(a);
//Article {title: "时间去哪儿了", status: "200", desc: "宝鸡新闻网"}

• 但是我们发现一个问题，如果数据库中有多个字段，我们需要每次重新定义mysqlDB类

/**
 * 问题：如果数据库中有多个字段，我们需要每次重新定义mysqlDB类
 * 解决：使用泛型类解决重复封装
 */

//定义操作数据库的泛型类
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 = 'admin'
u.passWord = '123456'

//使用User类来约束泛型类
var DB = new MysqlDB<User>();



//我又想定义一个Aritcile类
class Article {
    title: string | undefined;
    status: string | undefined;
    desc: string | undefined;
}

var a = new Article();
a.title = '时间去哪儿了'
a.status = '200'
a.desc = '宝鸡新闻网'

var Db2 = new MysqlDB<Article>();



//这样我一个泛型类，可以给多个数据库字段使用
//实例化的时候进行传值
class Person{
    name:string | undefined;
    age:number|undefined;
    id:number | undefined;
    constructor(params:{
        name:string | undefined,
        age:number | undefined,
        id?:number | undefined
    }){
        this.name = params.name;
        this.age = params.age;
        this.id = params.id;
    }
}

var p = new Person({
    name:'张三',
    age:20
})

var db = new MysqlDB<Person>();

• 数据库修改

/**
 * 修改数据库数据
 */

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

    //修改
    updata(info:T,id:number):boolean{
        console.log(info)
        console.log(id);
        return true;
    }
}



class Person{
    name:string | undefined;
    age:number|undefined;
    id:number | undefined;
    constructor(params:{
        name:string | undefined,
        age:number | undefined,
        id?:number | undefined
    }){
        this.name = params.name;
        this.age = params.age;
        this.id = params.id;
    }
}

var p = new Person({
    name:'张三',
    age:20
})

var db = new MysqlDB<Person>();
db.updata(p,12);
//Person {name: "张三", age: 20, id: undefined}

p.id = 12;
db.updata(p,12);
// Person {name: "张三", age: 20, id: 12}