typescript 泛型 泛型函数 泛型变量 泛型类 泛型接口

  • Post author:
  • Post category:其他

泛型定义

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

泛型函数

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

// 可返回string和number类型的数据 (代码冗余)
function getData1(value:string):string{
    return value
}
function getData2(value:number):number{
    return value
}

// any 相当于放弃了类型检测
function getData3(value:any):any{
    return value
}

// 实现传入什么类型返回什么类型
// T 表示泛型,具体什么类型是调用这个方法的时候绝定的(也可以是其它字母)
function getData4<T>(value:T):T{ // 指定了返回的类型
    // 传入什么 返回什么
    return value
}
getData4<number>(123) //使用
getData4<string>("xxx") 

// 返回任意类型
function getData5<T>(value:T):any{  
    return "dd"
}
getData5<number>(123) //使用
getData5<string>("dd") 

泛型类

比如有个最小堆算法, 需要同时支持返回数字和字符串2种类型
只支持 number类型

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(22)
m.add(2)
m.add(66)
console.log(m.min()) //2

可支持多类型 对不特定数据类型的支持

class MinClass<T>{
    public list:T[] = [];
    add(num:T):void{
        this.list.push(num)
    }

    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 m = new MinClass<string>() //实例化类 并且制定了类的 T代表类型
m.add("1")
m.add("12")
m.add("23")
console.log(m.min()) //1

把类当做参数的泛型类

class User{
	name: string | undefined;
	pwd: string | undefined
}
class MysqlDb{
    add(user:user):boolean{
        return true
    }
}
var u = new User()
u.name = "u-name"
u.pwd = "u-123"

var sql = new MysqlDb()
sql.add(u)

泛型类

class User{
	name: string | undefined;
	pwd: string | undefined
}
class MysqlDb<T>{
    add(user:T):boolean{
        return true
    }
}
var u = new User()
u.name = "u-name"
u.pwd = "u-123"

var sql = new MysqlDb<User>()
sql.add(u)

参数传对象

class User{
	name: string | undefined;
    pwd: string | undefined;
    constructor(params:{
        name: string | undefined,
        pwd: string | undefined
    }){
        this.name = params.name
        this.pwd = params.pwd
    }
}
class MysqlDb<T>{
    add(user:T):boolean{
        return true
    }
}
var u = new User({
    name:"u-name",
    pwd:"u-123"
})

var sql = new MysqlDb<User>()
sql.add(u)

泛型接口

函数接口

interface ConFigFu{  // 函数类型接口
    (value1:string,value2:string):string
}

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

setData("xx","yy")

泛型接口
第一种写法

interface ConFigFu{  
    <T>(value1:T,value2:T):T
}

var setData:ConFigFu = function<T>(value1:T,value2:T):T{
    return value1
}

setData<string>("xx","yy")

第二种写法

interface ConFigFu<T>{  
    (value1:T,value2:T):T
}

var setData = function<T>(value1:T,value2:T):T{
    return value1
}

var getdata:ConFigFu<string> = setData

getdata("xx","yy")

版权声明:本文为weixin_42448623原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。