泛型的使用 - Tracy TypeScript 小笔记

泛型

所谓泛型，就是把参数的“类型”，也作为一种参数传递给函数

// 类型的参数化

// 在定义这个函数时, 我不决定这些参数的类型
// 而是让调用者以参数的形式告知,我这里的函数参数应该是什么类型
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")

传入多个类型

function foo<T, E, O>(arg1: T, arg2: E, arg3?: O, ...args: T[]) {

}

foo<number, string, boolean>(10, "abc", true)

平时在开发中我们可能会看到一些常用的名称：

T：Type的缩写，类型

K、V：key和value的缩写，键值对

E：Element的缩写，元素

O：Object的缩写，对象

泛型接口

在定义接口的时候我们也可以使用泛型

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

//这里是给泛型设置了默认值， string 和 number

const p: IPerson = {
  name: "why",
  age: 18
}

//没有默认值的话新建使用方式如下
const p: IPerson<string, number> = {
  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属性的；

interface ILength {
  length: number
}

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

getLength("abc")
getLength(["abc", "cba"])
getLength({length: 100})