TS第五讲 -------- 泛型

1、什么是泛型

1.1、定义

泛型：指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定具体类型的一种特性。

1.2、写法— <T>

2、泛型基本示例

示例需求1：
定义一个函数，传入两个参数，第一参数是数据，第二参数是数量，函数的作用：根据数量产生对应个数的数据，存放在一个数组中

function getArr(value:number,count:number):number[] {
    
    
    const arr : number[] = []
    for(let i=0;i<count;i++){
    
    
        arr.push(value)
    }
    return arr
}

const arr1 = getArr(100,3)
console.log(arr1)

示例需求2：
定义一个函数，同上，只不过传入的是字符串类型

function getArr2(value:string,count:number):string[] {
    
    
    const arr : string[] = []
    for(let i=0;i<count;i++){
    
    
        arr.push(value)
    }
    return arr
}

const arr2 = getArr2('100',3)
console.log(arr2)

示例需求3：
合并上面两种情况 ------ 使用泛型

function getArr4<T>(value:T,count:number):T[] {
    
    
    const arr : T[] = []
    for(let i=0;i<count;i++){
    
    
        arr.push(value)
    }
    return arr
}

const arr4 = getArr4<string>('hello',3)
console.log(arr4)
const arr5 = getArr4<number>(200,5)
console.log(arr5)

3、多个泛弄参数的函数

function getMsg<T,V>(value:T,count:V):[T,V] {
    
    
    return [value,count]
}

const arr1 = getMsg<number,string>(100.9273,'hello')
console.log(arr1[0].toFixed(2))
console.log(arr1[1].split(''))

4、泛型接口

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

// 需求：定义一个类，用来存储用户的相关信息（id,名字，年龄）

// 定义一个泛型接口
interface IBaseCRUD<T> {
    
    
    data: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
    }
}

// 定义一个类，可以针对用户的信息对象进行增加及查询的操作
class UserCRUD implements IBaseCRUD<User>{
    
    
    data:User[] = []
    
    // 存储用户信息
    add(user:User):User{
    
    
        user.id = Math.random() + Date.now()
        this.data.push(user)
        return user
    }
    getUserId(id:number):User{
    
    
        return this.data.find(user=>user.id === id)
    }
}


const userCRUD:UserCRUD = new UserCRUD()
userCRUD.add(new User('jack',20))
userCRUD.add(new User('Tony',25))
let {
    
    id} = userCRUD.add(new User('Ros',30))
console.log(userCRUD.data)

const user = userCRUD.getUserId(id)
console.log(user)

5、泛型类

在定义类时, 类中的属性值的类型是不确定的，方法中的参数及返回值的类型也是不确定的。
在实例化时，再确定泛型的类型

// 定义一个泛型类
class GenderIcNumber<T> {
    
    
    defaultValue:T
    
    add: (x:T,y:T) => T
    
}


const g1:GenderIcNumber<number> = new GenderIcNumber<number>()
g1.defaultValue = 100
g1.add = function(x,y){
    
    
    return x + y
}
console.log(g1.add(100,20))


const g2:GenderIcNumber<string> = new GenderIcNumber<string>()
g2.defaultValue = 'hello'
g2.add = function(x,y){
    
    
    return x + y
}
console.log(g2.add('hello',' world'))

6、泛型约束

泛型约束:
如果我们直接对一个泛型参数取 length 属性, 会报错, 因为这个泛型根本就不知道它有这个属性；

  // 没有泛型约束
function fn <T>(x: T): void {
    
    
  // console.log(x.length)  // error
}

//使用泛型约束来实现
interface Lengthwise {
    
    
  length: number;
}

// 指定泛型约束
function fn2 <T extends Lengthwise>(x: T): number {
    
    
  console.log(x.length)
  return x.length
}

console.log(fn2<string>('how are you?'))
// console.log(fn2<number>(100))   // 报错：number 无length属性