【Typescript重点】泛型的使用

$多一些不为什么的坚持$ 🙊

$贤蛋🥚大眼萌，一名很普通但不想普通的程序媛$🤳

📝本文章收录于专栏：Typescript学习

🧨 认识泛型

​ Typescript的泛型就是可以实现类型参数化。有人说那么使用any，使用any的时候，我们其实已经丢失了类型信息了。我们需要在这里使用一种特性的变量 - 类型变量（type variable），它作用于类型，而不是值。

我们可以通过两种方式来调用它：

• 通过 <类型> 的方式将类型传递给函数；
• 通过类型推到，自动推到出我们传入变量的类型

function sum<Type>(num: Type): Type {
  return num
}

// 1.调用方式一: 明确的传入类型
sum<number>(20)
sum<{name: string}>({name: "why"})
sum<any[]>(["abc"])

// 2.调用方式二: 类型推导
sum(50)
sum("abc")
1
2
3
4
5
6
7
8
9
10
11
12

🧬 泛型的基本补充

​ 我们在开发时可以传入多个类型。常用的名称有：

• T：Type的缩写，类型
• K、V：key和value的缩写，键值对
• E：Element的缩写，元素
• O：Object的缩写，对象

🎉 泛型接口的使用

​ 在定义接口的时候也可以使用泛型。

💊 泛型类

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")
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

🎁 泛型的类型约束

​ 有时候我们希望传入的类型有某些共性，但是这些共性可能不是在同一种类型中。比如string和array都是有length的，或者某些对象也是会有length属性的，这个时候我们就可以对类型做一个约束。使用extends 关键字。