Typescript——泛型的学习

泛型

认识泛型

软件工程的主要目的是构建不仅仅明确一致的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})