【Typescript】ts中泛型的使用方法和泛型约束

Typescript中泛型的使用方法和泛型约束

泛型的理解和定义

泛型是一种特殊的变量，只用于表示类型而不是值，称之为：类型变量。

当我们定义一个变量不确定类型的时候有两种解决方式：

1、使用any
使用any定义时存在的问题：虽然可以知道传入值的类型但是无法获取函数返回值的类型；使用过多的any失去了ts类型保护的优势，就变成众人口中的anyscript
2、使用泛型 泛型指的是在定义函数/接口/类型时，不预先指定具体的类型，具体什么类型是调用这个方法的时候决定的

泛型的定义：可以支持不特定的数据类型 要求传入和返回的参数一致

通俗理解：泛型就是解决类，接口，方法的复用性，和对不特定数据类型的支持

泛型函数

在函数中使用泛型

function getData<T>(val:T):T{
    
       //T不是定死的，可以改成任意字符串，但是3个地方要一致
        return val;
}
getData<number>(123)
getData<string>('zhendeshi')
getData<string | boolean>(true) //返回值是布尔类型的 true
//getData<string>(123)  这是错误的写法，泛型的定义是要求传入和返回的参数一致，此时传入参数不一致

泛型类

在类中使用泛型

//在类中实现挑选最小数
class Minlist<T> {
    
    
    list:T[]=[]
    add(value:T):void {
    
    
        this.list.push(value)
    }
    min():T {
    
    
        var minli = this.list[0]
        for(var i=0;i<this.list.length;i++) {
    
    
            if(minli>this.list[i]) {
    
    
                minli = this.list[i]
            }
        }
        return minli
    }
}
var m=new Minlist<number>() //实例化类，并且制定了类的T代表的类型是number
m.add(3)
m.add(2)
m.add(4)
console.log(m.min());//2
var m=new Minlist<string>() //实例化类，并且制定了类的T代表的类型是string
m.add('a')
m.add('p')
m.add('u')
console.log(m.min());//a

泛型接口

在接口中使用泛型

写法1

interface Config{
    
    
    <T>(val:T):T
}
var getData:Config=function<T>(val:T):T{
    
    
    console.log(val);
    return val
}
getData<string>('zs')
// getData<number>('zs')  错误写法，只能传入number值

写法2

interface Config<T>{
    
    
    (val:T):T
}
function getData<T>(val:T):T{
    
    
    console.log(val);
    return val
}
var mygetdata:Config<string> = getData
mygetdata('200')

泛型约束

泛型约束即是对泛型的类型进行约束控制，当在函数里使用泛型参数的属性或者方法时，就需要对泛型进行约束。如下所示的student函数可以接受你选择要传递到类型变量的任何类型。但是，在这种情况下，你应该将 value参数可以接受的类型限制为可以对其执行添加操作的一系列类型，而不是接受任何可能的类型。这种情况称为“泛型约束”。

使用接口约束泛型

interface Person {
    
    
  name:string;
  age:number;
}
function student<T extends Person>(value:T):T {
    
    
  return value;
}

student({
    
    name:'lili'});//错误写法，类型 "{ name: string; }" 中缺少属性 "age"，但类型 "Person" 中需要该属性
student({
    
     name: "lili" , age:'11'});//错误写法，不能将类型“string”分配给类型“number”
student({
    
     name: "lili" , age:11});