泛型
认识泛型
软件工程的主要目的是构建不仅仅明确一致的API,还要让你的代码具有很强的可重用性,比如我们可以通过函数来封装一些API,通过传入不同的函数参数,让函数帮助我们完成不同的操作,但是对于参数的类型是否也可以参数化呢?
什么是类型的参数化?
我们来提一个需求:封装一个函数,传入一个参数并且返回这个参数。如果我们是TypeScript的思维方式,要考虑这个参数和返回值的类型需要一致:
function add(num: number): number{
return num;
}
上面的代码虽然实现了,但是不适用于其他类型,比如string、boolean、Person等类型。
泛型实现类型参数化
虽然any是可以的,但是定义为any的时候,我们其实已经丢失了类型信息,比如我们传入的是一个number,那么我们希望返回的可不是any类型,而是number类型;所以,我们需要在函数中可以捕获到参数的类型是number并且同时使用它来作为返回值的类型。
我们需要在这里使用一种特定的变量 - 类型变量,它作用于类型,而不是值:
function sum<Type>(num: Type): Type {
return num
}
这里我们可以使用两种方式来调用它:
方式一:通过 <类型> 的方式将类型传递给函数。
方式二:通过类型推到,自动推到出我们传入变量的类型。
泛型的基本补充
当然我们也可以传入多个类型:
function sum<Type, E>(num1: Type, num2: E) {}
平时在开发中我们可能会看到一些常用的名称:
T:Type的缩写,类型。
K、V:key和value的缩写,键值对。
E:Element的缩写,元素。
O:Object的缩写,对象。
泛型接口的使用
在定义接口的时候我们也可以使用泛型:
interface IPerson<T1 = string, T2 = number> {
name: T1
age: T2
}
const p: IPerson = {
name: "why",
age: 18
}
泛型类的使用
我们也可以编写一个泛型类:
class Point<T> {
x: T
y: T
z: T
constructor(x: T, y: T, z: T) {
this.x = x
this.y = y
this.z = y
}
}
const p1 = new Point("1.33.2", "2.22.3", "4.22.1")
const p2 = new Point<string>("1.33.2", "2.22.3", "4.22.1")
const p3: Point<string> = new Point("1.33.2", "2.22.3", "4.22.1")
const names1: string[] = ["abc", "cba", "nba"]
const names2: Array<string> = ["abc", "cba", "nba"] // 不推荐(react jsx <>)
泛型的类型约束
有时候我们希望传入的类型有某些共性,但是这些共性可能不是在同一种类型中,比如string和array都是有length属性的或者某些对象也是会有length属性的,那么只要是拥有length的属性都可以作为我们的参数类型,那么应该如何操作呢?
interface ILength {
length: number
}
function getLength<T extends ILength>(arg: T) {
return arg.length
}
getLength("abc")
getLength(["abc", "cba"])
getLength({length: 100})