【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
}

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

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

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

// 泛型定义，T表示泛型，具体什么类型是调用这个方法的时候决定的
function getData<T>(value: T): T {return value
}// getData<number>('string') // 错误的写法
getData<number>(123) // 传入的参数必须为number类型
getData<string>('str') // 传入的参数必须为string类型// 泛型定义(了解): 指定调用时的参数类型，返回参数为任意类型
function getData1<T>(value: T): any {return '123456'
}getData1<number>(123)

三、泛型类

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

只支持 number类型

class MinClass {public list: number[] = [] // 定义类中公共属性listadd (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

使用类的泛型实现

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

四、泛型接口

// 定义函数类型接口
interface ConfigFn {(value1: string, value2: string): string
}// 函数类型接口使用
const setData: ConfigFn = (value1: string, value2: string): string => {return value1 + value2
}console.log(setData('name', '张三')) // name张三

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

interface ConfigFn {<T>(value: T): T
}const getData: ConfigFn = <T>(value: T): T => {return value
}getData<string>('指定为string类型，传入类型必须为string类型')
getData<string>(123) // 错误写法

interface ConfigFn<T> {(value: T): T
}function getData<T> (value: T): T {return value
}const myGetDate: ConfigFn<string> = getDatamyGetDate('20')