typescript4-泛型

泛型

泛型介绍

1. 在定义函数，接口，类的时候不能预先确定要使用的数据类型，而是在使用函数，接口，类的时候才能确定
2. 语法函数名<>

functiongetArray<T>(value:T):T[]{const arr:Array<T>=[]
    arr.push(value)return arr
}console.log(getArray<string>("jack"))console.log(getArray<number>(123))// [ 'jack' ]// [ 123 ]

多个泛型参数的函数

一个函数可以定义多个泛型

functiongetArray<T,K>(value1:T,value2:K):[T,K]{return[value1,value2]}const arr1=getArray<string,number>("jack",100.123)console.log(arr1[0].split(''))console.log(arr1[1].toFixed(2))// [ 'j', 'a', 'c', 'k' ]// 100.12

泛型接口

1. 在定义接口时, 为接口中的属性或方法定义泛型类型
2. 在使用接口时, 再指定具体的泛型类型

//定义泛型接口interfaceIBaseCRUD<T>{
    data:Array<T>,add:(t:T)=>T,getUserId:(id:number)=>T}//定义一个用户信息的类classUser{
    id ?:number
    name:string
    age:numberconstructor(name:string,age:number){this.name =name
        this.age = age
    }}// 定义一个类可以实现用户操作 implements 表示只使用接口 跟extends有区别classUserCRUDimplementsIBaseCRUD<User>{
    data:Array<User>=[]//定义个数组用于保存用户信息add(user:User): User{// 添加操作
        user.id= Date.now()+ Math.random()// 获取随机idthis.data.push(user)// 添加到数组中return user
    }getUserId(id:number): User {returnthis.data.find(user => user.id ===id)// 根据id查询}}const userCRUD=newUserCRUD()
userCRUD.add(newUser('jack',20))console.log(userCRUD.data)const{id}=userCRUD.add(newUser('rose',22))console.log(userCRUD.getUserId(id))/*
* 输出
* [
*  User { name: 'jack', age: 20, id: 1652598623532.2834 },
* User { name: 'rose', age: 22, id: 1652598623532.5269 }
* ]
* User { name: 'rose', age: 22, id: 1652598623532.5269 }
*/

泛型类

定义类时，类中属性值是不确定的，方法中的参数和返回值也是不确定的

// 类中先用泛型定义占位classGeneric<T>{
    defalutValue:Tadd:(K,V)=>T}//实例初始化时指定类型const g1: Generic<number>=newGeneric<number>()
g1.defalutValue =100
g1.add=function(k,v){return k + v
}console.log(g1.defalutValue)console.log(g1.add(10,100))//100//110// 新的实例化对象又可以重新指定类型const g2:Generic<string>=newGeneric<string>()
g2.defalutValue ="jack"
g2.add=function(k,v){return k + v
}console.log(g2.defalutValue)console.log(g2.add("100",'10'))// jack// 10010

泛型约束

定义一个接口用来约束传入的信息

// 定义泛型约束classILength{
    length:number}functiongetLength<Textends ILength>(val:T):number{return val.length
}console.log(getLength<string>("1233"))//4