06 TypeScript 泛型

1 泛型的基本使用

• 泛型可以理解为宽泛的类型，通常用于类和函数。使用的时候我们再指定类型

• 泛型不仅可以让我们的代码变得更加健壮,还能让我们的代码在变得健壮的同时保持灵活性和可重用性

• 通过用<T>来表示，放在参数的前面

export default {}

// 回顾
// const arr1:string[]=["HTML","CSS","JavaScript"]
// const arr2:Array<string>=["张三","李四"]

// const arr3:Array<number>=[1,2,3,4,5]

// 不使用泛型
// let res=new Array(3).fill("王五")
// console.log(res)

// let getArray=(value:number,items:number):number[]=>{
//     return new Array(items).fill(value)
// }

// let res1=getArray(10,5)
// console.log(res1)

// let getArray=(value:any.items:number):any[]=>{
//     return new Array(items).fill(value)
// }

// let res1=getArray("李明",15)
// let res2=getArray(5,10)


// 使用泛形
let getArray=<T>(value:T,items:number):T[]=>{
    return new Array(items).fill(value)
}

let res1=getArray("李明",15)

let res2=getArray(5,10)

2 泛形约束

• 在TS中，我们需要严格的设置各种类型，我们使用泛型之后，将会变得更加灵活，但同时也将会存在一些问题

• 我们需要对泛型进行约束来解决这些问题

export default {}

//演示可能出现的问题
// function getLength<T>(arr:T):T{
//     console.log(arr.length)
//     return arr
// }


// 通用的方法
// function getLength<T>(arr:Array<T>):Array<T>{
//     console.log(arr.length)
//     return arr
// }

// getLength("孟子义");
// getLength([1,2,3]);
// getLength({length: 20});


//泛型接口
interface ILength{
    length:number
}

function getLength<T extends ILength>(arr:T): number {
    return arr.length
}

getLength("孟子义");
getLength([1,2,3]);
getLength({length: 20});

3 泛型接口

• 将泛型与接口结合起来使用，可以大大简化我们的代码，增加我们的代码可读性。

• 泛型也可以使用默认值

export default {}

// interface IPerson {
//     name: string
//     sex: string
// }
// let y: IPerson = {
//     name: "于文文",
//     sex: "女"
// }


// interface IPerson<T1,T2>{
//     name:T1
//     sex:T2
// }

// let l:IPerson<string,string>={
//     name:"老李",
//     sex:"男"
// }


interface IPerson<T1=string,T2=number>{
    name:T1
    age:T2
}

let z:IPerson={
    name:"张三",
    age:30
}

4 泛型类

• 泛型类看上去与泛型接口差不多。泛型类使用 (<>) 括起泛型类型,跟在类名后面。

export default {}

class Person<T1,T2> {
    name: T1
    age : T2
    sex : T1

    constructor(name :T1, age:T2, sex:T1){
        this.name = name
        this.age = age
        this.sex = sex
    }
}

let p= new Person<string, number>("刘欢喜",18,"未知")
console.log(p)

// const p1 = new Person ("刘诗诗", 18, "女")
// const p2 = new Person<string, number>("虞书欣", 18, "女")
// const p3:Person<string, number> = new Person("刘诗诗", 18, "女")

5 使用类型参数进行约束

• 一个泛型被另一个泛型约束就叫做泛型约束中使用类型参数

• 你可以声明一个类型参数，且它被另一个类型参数所约束。比如， 现在我们想要用属性名从对象里获取这个属性。并且我们想要确保这个属性存在于对象 obj 上,因此我们需要在这两个类型之间使用约束