typescript4-泛型

泛型

泛型介绍

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

function getArray<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 ]

多个泛型参数的函数

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

function getArray<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. 在使用接口时, 再指定具体的泛型类型

//定义泛型接口
interface IBaseCRUD<T>{
    
    
    data:Array<T>,
    add:(t: T) => T,
    getUserId: (id: number) => T
}
//定义一个用户信息的类
class User{
    
    
    id ? :number
    name: string
    age: number
    constructor(name:string,age: number) {
    
    
        this.name =name
        this.age = age
    }
}
// 定义一个类可以实现用户操作 implements 表示只使用接口 跟extends有区别
class UserCRUD implements IBaseCRUD<User> {
    
    
    data: Array<User> = [] //定义个数组用于保存用户信息
    add(user:User): User{
    
     // 添加操作
        user.id= Date.now() + Math.random() // 获取随机id
        this.data.push(user) // 添加到数组中
        return user
    }
    getUserId(id: number): User {
    
    
        return this.data.find(user => user.id ===id) // 根据id查询
    }
}
const userCRUD=new UserCRUD()
userCRUD.add(new User('jack',20))
console.log(userCRUD.data)
const {
    
    id}=userCRUD.add(new User('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 }
*/

泛型类

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

// 类中先用泛型定义占位
class Generic<T> {
    
    
    defalutValue: T
    add: (K, V) => T
}
//实例初始化时指定类型
const g1: Generic<number> = new Generic<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>=new Generic<string>()
g2.defalutValue ="jack"
g2.add = function (k,v){
    
    
    return k + v
}
console.log(g2.defalutValue)
console.log(g2.add("100",'10'))
// jack
// 10010

泛型约束

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

// 定义泛型约束
class ILength{
    
    
    length: number
}
function getLength<T extends ILength>(val: T): number {
    
    
    return val.length
}

console.log(getLength<string>("1233"))
//4