在前端开发中，我们常常需要处理各种数据类型，例如数组、对象、函数等等。如果每次都要手写针对不同数据类型的处理方法，代码会变得冗长、复杂且容易出错。为了解决这个问题，TypeScript 提供了泛型（Generics）的概念，可以在函数、类、接口等代码结构中使用，实现更加通用、灵活且可靠的代码。
什么是泛型？
泛型是指在编写代码时，不指定具体的数据类型，而是在使用时指定的一种编程概念。通过泛型，我们可以把数据类型作为参数传递给函数或类，在编译时才确定具体的数据类型。这样一来，我们可以编写更加通用、灵活的代码，提高代码的复用性。
泛型的使用
使用泛型函数
考虑以下需求：实现一个函数，输出给定数组中的最小值。一种常规的实现方式是，写一个函数，遍历数组，找到最小值。这样写的问题是，只针对数组类型有效，如果要处理其他类型的数据，就要写另一个函数。
// javascriptcn.com 代码示例
function minNumber(arr: number[]): number {
let min = arr[0];
for (let i = 1; i < arr.length; i++) {
if (arr[i] < min) {
min = arr[i];
}
}
return min;
}
const numbers = [3, 2, 1];
console.log(minNumber(numbers)); // 输出 1使用泛型实现相同功能，可以让我们实现一个通用的函数，可以用于任何数组的最小值计算。
// javascriptcn.com 代码示例
function min<T>(arr: T[]): T {
let min = arr[0];
for (let i = 1; i < arr.length; i++) {
if (arr[i] < min) {
min = arr[i];
}
}
return min;
}
console.log(min([3, 2, 1])); // 输出 1
console.log(min(['c', 'b', 'a'])); // 输出 'a'
console.log(min([{ a: 3 }, { a: 1 }, { a: 2 }], (item: any) => item.a)); // 输出 { a: 1 }可以看到，使用泛型实现的函数更加通用，可以传递任何类型的数组。泛型函数的定义方法是使用尖括号 <>，其中写上泛型参数的名称，这里用 T 代表任何类型。函数中用 T[] 表示一个元素类型为 T 的数组类型。函数中的变量也必须是一个类型为 T 的数据类型，即泛型参数。
对于数组类型，我们还可以定义其他的泛型函数来处理数组，例如获取数组中的第一个元素、对数组元素进行映射等等。
// javascriptcn.com 代码示例
function first<T>(arr: T[]): T {
return arr[0];
}
console.log(first([3, 2, 1])); // 输出 3
console.log(first(['c', 'b', 'a'])); // 输出 'c'
function map<T, U>(arr: T[], callbackfn: (value: T) => U): U[] {
return arr.map(callbackfn);
}
console.log(map([3, 2, 1], (item) => item + 1)); // 输出 [4, 3, 2]
console.log(map(['c', 'b', 'a'], (item) => item.charCodeAt(0))); // 输出 [99, 98, 97]使用泛型类
对于类的定义，我们也可以使用泛型来定义一个可以应用于多种类型的类，增加代码的复用性。
// javascriptcn.com 代码示例
class Stack<T> {
private items: T[] = [];
push(item: T) {
this.items.push(item);
}
pop(): T {
return this.items.pop();
}
}
const numStack = new Stack<number>();
numStack.push(1);
numStack.push(2);
numStack.push(3);
console.log(numStack.pop()); // 输出 3
const strStack = new Stack<string>();
strStack.push('a');
strStack.push('b');
strStack.push('c');
console.log(strStack.pop()); // 输出 'c'在泛型类的定义中，我们用 <T> 表示泛型参数，通过参数传递实际使用的数据类型。这里定义了一个 Stack 类，它可以应用于任何数据类型的栈操作，类中使用 T[] 表示一个元素类型为 T 的数组类型，并实现了 push 和 pop 两个方法。
使用泛型接口
泛型还可以应用于接口的定义。泛型接口可以定义函数、类和对象等数据类型，用于对不同数据类型的规范和约束。
// javascriptcn.com 代码示例
interface Map<T> {
[key: string]: T;
}
const numMap: Map<number> = {
a: 1,
b: 2,
c: 3,
};
console.log(numMap); // 输出 { a: 1, b: 2, c: 3 }
const strMap: Map<string> = {
a: 'A',
b: 'B',
c: 'C',
};
console.log(strMap); // 输出 { a: 'A', b: 'B', c: 'C' }在泛型接口中，我们用 <T> 表示泛型参数，通过参数传递实际使用的数据类型。这里定义了一个 Map 接口，用于定义以字符串为键，值类型为 T 的对象类型。使用时，可以通过传递实际的值类型来构造一个对象。
总结
泛型是 TypeScript 提供的一种强大的编程概念，可以大大提高代码的复用性。通过使用泛型，我们可以定义更加通用、灵活的函数、类和接口，以处理各种数据类型的情况。掌握泛型的使用方法可以让我们编写出更加健壮、高效的代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6541b5aa7d4982a6ebb4e264