【06】基础知识：typescript中的泛型

一、泛型的定义

在软件开发中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。

组件不仅能支持当前数据类型，同时也能支持未来的数据类型，这在创建大型系统时提供了十分灵活的功能。

在像 C# 和 Java 这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据，这样用户就可以以自己的数据类型来使用组件。

通俗理解，泛型就是解决类、接口、方法的复用性，以及对不特定数据类型的支持（类型校验）。

二、泛型的函数

// 只能返回 string类型的数据
function getData(value: string): string {
  return value
}

// 同时返回 string类型 和 number类型，但是代码冗余
function getData1(value: string): string {
  return value
}

function getData2(value: number): number {
  return value
}

// 可以同时返回 string类型 和 number类型，但是放弃了类型检查
function getData3(value: any): any {
  return value
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

由上可看出，any类型 传入的参数类型和返回的参数类型可以不一致。

想要实现：传入什么，返回什么。比如：传入 number类型 必须返回 number类型，传入 string类型 必须返回 string类型，就需要用的泛型。

泛型：可以支持不特定的数据类型，要求传人的参数和返回的参数一致。

// 泛型定义，T表示泛型，具体什么类型是调用这个方法的时候决定的
function getData<T>(value: T): T {
  return value
}

// getData('string') // 错误的写法
getData<number>(123) // 传入的参数必须为number类型
getData<string>('str') // 传入的参数必须为string类型


// 泛型定义(了解): 指定调用时的参数类型，返回参数为任意类型
function getData1<T>(value: T): any {
  return '123456'
}

getData1<number>(123)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

三、泛型类

最小堆算法，需要同时支持返回数字和字符串a - z两种类型，通过类的泛型来实现。

只支持 number类型

class MinClass {
  public list: number[] = [] // 定义类中公共属性list
  add (num: number): void { // 向list中追加数据
    this.list.push(num)
  }
  min(): number { // 求list数组中最小的数
    let minNum: number = this.list[0]
    for (let i: number = 0; i < this.list.length; i++) {
      if (minNum > this.list[i]) {
        minNum = this.list[i]
      }
    }
    return minNum
  }
}

let m = new MinClass()
m.add(3)
m.add(4)
m.add(10)
m.add(8)
console.log(m.min()) // 3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

使用类的泛型实现

class MinClass<T> {
  public list: T[] = []
  add(value: T): void {
    this.list.push(value)
  }
  min(): T { // 求list数组中最小的数
    let minNum: T = this.list[0]
    for (let i: number = 0; i < this.list.length; i++) {
      if (minNum > this.list[i]) {
        minNum = this.list[i]
      }
    }
    return minNum
  }
}

/* 实例化类，并且指定了类的T代表的类型是number */
let m1 = new MinClass<number>()
m1.add(5)
m1.add(4)
m1.add(10)
console.log(m1.min()) // 4

/* 实例化类，并且指定了类的T代表的类型是string */
let m2 = new MinClass<string>()
m2.add('z')
m2.add('c')
m2.add('e')
console.log(m2.min()) // c
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

四、泛型接口

// 定义函数类型接口
interface ConfigFn {
  (value1: string, value2: string): string
}

// 函数类型接口使用
const setData: ConfigFn = (value1: string, value2: string): string => {
  return value1 + value2
}

console.log(setData('name', '张三')) // name张三
1
2
3
4
5
6
7
8
9
10
11

泛型接口：接口类型在调用方法时动态传入

interface ConfigFn {
  <T>(value: T): T
}

const getData: ConfigFn = <T>(value: T): T => {
  return value
}

getData<string>('指定为string类型，传入类型必须为string类型')
getData<string>(123) // 错误写法
1
2
3
4
5
6
7
8
9
10

interface ConfigFn<T> {
  (value: T): T
}

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

const myGetDate: ConfigFn<string> = getData

myGetDate('20')
1
2
3
4
5
6
7
8
9
10
11