Typescript泛型详解解读

泛型 : 在定义函数、接口、类的时候不能预先确定要使用的数据的类型,而是在使用函数、接口、类的时候才能确定数据的类型

普通方法示例：

需求:定义一个函数,传入两个参数,第一参数是数据,第二个参数是数量,函数的作用:根据数量产生对应个数的数据,存放在一个数组中

(() => {// 需求:定义一个函数,传入两个参数,第一参数是数据,第二个参数是数量,函数的作用:根据数量产生对应个数的数据,存放在一个数组中// 定义一个函数function getArr1(value: number, count: number): number[] {// 根据数据和数量产生一个数组const arr: number[] = []for (let i = 0; i < count; i++) {arr.push(value)}return arr}const arr1 = getArr1(10.25, 3)console.log(arr1)})()

普通方法示例2：

需求:可以传入任意类型的数据,返回来的是存储这个任意类型数据的数组

(() => {//需求:可以传入任意类型的数据,返回来的是存储这个任意类型数据的数组function getArr3(value: any, count: number): any[] {// 根据数据和数量产生一个数组const arr: any[] = []for (let i = 0; i < count; i++) {arr.push(value)}return arr}const arr1 = getArr3(100.123, 3)const arr2 = getArr3('abc', 3)console.log(arr1)console.log(arr2)// arr1中存储的是数字类型的数据// arr2中存储的是字符串类型的数据console.log(arr1[0].toFixed(2)) // 没有任何的智能提示的信息(要么有方法名字的提示信息,要么有错误的提示信息)console.log(arr2[0].split('')) // 没有任何的智能提示的信息(要么有方法名字的提示信息,要么有错误的提示信息)})()

泛型方法示例：

(() => {function getArr4<T>(value: T, count: number): T[] {// 根据数据和数量产生一个数组// const arr: T[] = []const arr: Array<T> = []for (let i = 0; i < count; i++) {arr.push(value)}return arr}const arr1 = getArr4<number>(200.12345, 5)const arr2 = getArr4<string>('abcdefg', 5)console.log(arr1)console.log(arr2)console.log(arr1[0].toFixed(3))  // 有智能提示的信息console.log(arr2[0].split(''))   // 有智能提示的信息})()

以上代码详细解读：

function getArr4<T>(value: T, count: number): T[]：
- getArr4 是函数名。
- <T> 是类型参数，它是一个类型占位符。通过使用泛型，这个函数可以处理不同类型的数据。
- value: T 表示函数接受一个类型为 T 的参数 value，这个参数将作为数组元素的内容。
- count: number 表示函数还接受一个 number 类型的参数 count，用于指定生成数组的长度。
- : T[] 是函数的返回值类型，表示函数将返回一个元素类型为 T 的数组。
const arr: Array<T> = []：声明了一个名为 arr 的常量，它是一个类型为 Array<T>（等同于 T[]）的数组，即元素类型为 T 的数组，用于存储生成的数组元素，初始化为空数组。
for (let i = 0; i < count; i++) { arr.push(value); }：通过 for 循环，根据 count 的值，将 value 重复 count 次添加到 arr 数组中。
return arr：循环结束后，返回生成的数组 arr。

const arr1 = getArr4<number>(200.12345, 5)：调用 getArr4 函数，明确指定类型参数 T 为 number。传入数值 200.12345 作为 value 参数，5 作为 count 参数。函数执行后会返回一个包含 5 个 200.12345 的数组，并将其赋值给 arr1。
const arr2 = getArr4<string>('abcdefg', 5)：调用 getArr4 函数，指定类型参数 T 为 string。传入字符串 'abcdefg' 作为 value 参数，5 作为 count 参数。函数执行后会返回一个包含 5 个 'abcdefg' 的数组，并将其赋值给 arr2。
onsole.log(arr1[0].toFixed(3))：访问 arr1 数组的第一个元素（类型为 number），调用 toFixed(3) 方法将该数字四舍五入保留三位小数，并将结果打印到控制台。由于 arr1 的类型被明确为 number[]，所以在访问 arr1[0] 时会有智能提示，编辑器能识别出 toFixed 方法是 number 类型的可用方法。
console.log(arr2[0].split(''))：访问 arr2 数组的第一个元素（类型为 string），调用 split('') 方法将该字符串拆分成字符数组，并将结果打印到控制台。同样，因为 arr2 的类型被明确为 string[]，在访问 arr2[0] 时会有智能提示，编辑器能识别出 split 方法是 string 类型的可用方法。