Typescript--泛型的使用

泛型的定义

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

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

通俗讲，泛型就是解决类接口方法的复用性，以及对不特定数据类型的支持。

泛型使用T来定义：

function fun<T>(name: T):T {
    return name
}

定义了一个函数，函数传入的参数类型和函数的返回值类型保持一致，具体的类型是什么，由调用者决定，比如：

function fun<T>(name:T):T{
    return name
}
fun:<string>('xiaoming') // xiaoming
fun<number>('小明') //  这是一个错误写法

注:
我们可能会想起定义函数的时候，使用any关键字，但是这里要强调的是，any关键字其实是放弃了typescript的类型校验。

泛型类

实现一个有最小堆的算法，需要同时支持返回数字和字符串俩种类型，通过类的泛型实现。

class MainClass<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
    }
}
let m = MinClass<number>()  //  实例化类，并且制定了类的T代表的类型是number
m.add(10)
m.add(45)
m.add(6)
m.add(2)
m.add(1)
m.add(9)
m.min() //  1

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

class MysqlDb <T> {
    add(info:T):boolean {
        console.log(info)
        return true
    }
}
class User {
    username: string | undefined;
    password: string | undefined;

}
let user = new User()
user.name = 'xiaoming'
user.password = '123456'
var db = MysqlDb<User>()    //  此时User起到了教研的作用
db.add(user)

class ArticleCate {
    title: string | undefined;
    desc: string | undefined;
    status: number | 0;
    constructor (param: {
        title: string | undefined;
        desc: string | undefined;
        status?: number | 0;
    }) {
        this.title = param.title;
        this.desc = param.desc;
        this.status = param.status;
    }
}
var a = new ArticleCate({
    title: '世界那么大',
    desc: '我想去看看',
    status: 0
})

var mydb = new MysqlDb<ArticleCate>()   //  此时ArticleCate起到了教研的作用
mydb.add(a)

泛型接口

• 方法一

  interface Config {
      <T>(value: T): T
  }
  var setData: Config = function<T>(value: T):T {
      return vale
  }
  setData<number>(12344)

• 方法二

  interface Config<T> {
      (value: T): T
  }
  function getData<T>(value: T):T {
      return value
  }
  var myGetData:Config<string> = getData
  myGetData('xiaoming')   //  正确
  myGetData(12345)   //  错误

  That’s all!