一文带你了解Ts泛型的应用

​想继续深入Ts其他知识点的同学可以关注下往期文章~
📖​ 一文讲解Typescript中工具类型
📖​ 一文带你了解中Typescript中type与interface的区别

 泛型是Ts中最难的部分，对于其概念进行理解后，还需要理解如何使用泛型，去封装可复用高的组件，使用泛型可以很好的帮助组件的可复用性。通过使用泛型可以使得在定义函数，接口或类的时候，可以不预先指定其具体的类型，而在使用的时候再进行定义。那么接下来，我们会先从案例展示->基础概念讲解，向大家了解Ts中泛型的使用。

使用泛型or不使用对比

泛型在类中的应用

 当我们定义一个累加数的类，类中的所操作的数值都为number类型，不使用泛型时会导致我们对number类型进行重复定义，例：

class AddNumber:number {
    private numArr: number[] = []
    add(num: number) {
        this.numArr.push(num)
    }
    getSum(): number {
        let sum = 0
        return this.numArr.reduce((total, num) => {
            return total + num
        }, sum)
    }
}

const addFun = new AddNumber()
addFun.add(1)
addFun.add(2)

 上述是不使用泛型时，接下来我们展示使用泛型来进行定义类。

class AddNumber<T> {
    private numArr: T[] = []
    add(num: T) {
        this.numArr.push(num)
    }
    getSum(): T {
        return this.numArr[0]
    }
}
// 向T赋值为number类型，则在AddNumber类中的所有T都为number类型
const addFun = new AddNumber<number>()
addFun.add(1)
addFun.add(2)

函数

 当我们需要对于传入字符串、数字、布尔值的函数都能返回对应类型的函数时，使用泛型还是可以大大减少代码量，还使得所定义的类型通俗易懂。
当我们不使用泛型时：

	function identityNumber(value: number): number {
	    return value
	}
	function identityString(value: string): string {
	    return value
	}
	function identityBoolean(value: boolean): boolean {
	    return value
	}
	

 当不使用泛型时，我们需要对三种返回值，分别声明三种不同的函数，而使用泛型，我们可以直接声明为一种，大大减少了代码量。

	function identity <T>(value:T) : T {
        return value
    }

泛型在其他类型中的应用

 在上面我们已经通过举例介绍过函数与类中泛型的应用了，但是泛型的使用不止以上两种，下面依次为大家介绍在其他类型下的使用。

多类型传参

 在泛型中，可以使用多个未知的类型占位，我们可以将对应的占位符表示为任意的参数类型。

const getUser = <T, U>(name: T, age: U) => {
    const user = <{ name: T, age: U }>{
        name: name,
        age: age
    }
    return user
}

泛型接口

 对于接口，我们也可以使用泛型来进行定义，其对应的type就为T类型。

interface typeValue<T> {
    type: T;
}

泛型别名

 泛型也可以作用与type上，从而行成泛型别名~

type User<T> = {
    name: T;
    age: T;
}

泛型使用默认参数

 对于使用者来说，可能会存在没有对此泛型进行传值操作或者从实际值参数也无法推断出此类型，所以在这里我们可以使用默认参数来约束没有进行赋值的泛型。此例中默认泛型为string类型。

type User<T = string> = {
    name: T;
    age: T;
}

泛型常用字母

• T：代表Type，我们常将其用作第一个类型名称变量
• K：代表Key，也就是键值对中的键
• V：代表Value，也就是键值对中的值
• E：代表Element，代表元素类型

 Ts泛型的应用讲解就到这里啦，在看完此文章后，是否对于泛型是否又有了新的认知呢？如果有帮助的话留个赞再走呗~