在编写前端代码时，我们经常需要定义各种各样的数据类型，如数字、字符串、数组、对象等。这些数据类型在不同的应用场景中会被反复使用，对于代码的重用性非常重要。而使用 TypeScript 的泛型（Generics）可以帮助我们更好地实现数据类型的复用。
什么是泛型
泛型可以看作是一种参数化的类型，允许我们在定义函数、类、接口等时使用类型参数，以实现通用性和复用性。
具体来说，一个泛型是一个占位符，它会在使用时被具体的类型替换。例如，定义一个泛型函数：
function identity<T>(arg: T): T {
return arg;
}这个函数使用了类型参数 T，表示参数和返回值的类型是相同的。
使用时可以指定类型参数的具体类型：
let output = identity<string>('hello');或者省略类型参数，TypeScript 会自动进行类型推断：
let output = identity('hello');泛型实例
下面我们来看一些泛型在实际开发中的使用案例。
泛型数组
我们可以使用泛型创建通用的数组类型：
function toArray<T>(arg: T): T[] {
return [arg];
}
let arr1 = toArray(1); // [1]
let arr2 = toArray('hello'); // ['hello']泛型接口
我们可以使用泛型定义接口，使其变得更加灵活和通用。
比如，定义一个键值对类型的接口：
interface KeyValuePair<K, V> {
key: K;
value: V;
}
let pair1: KeyValuePair<string, number> = { key: 'foo', value: 123 };
let pair2: KeyValuePair<number, string> = { key: 456, value: 'bar' };这个接口用于表示一组以某种数据类型为键，以另一种数据类型为值的键值对，例如 { key: 'foo', value: 123 } 代表字符串 'foo' 是数字 123 的键。
泛型类
除了定义泛型函数和接口，我们也可以定义泛型类。同样的，泛型类也使用类型参数来实现代码的通用性。
比如，定义一个基础的泛型栈：
-- -------------------- ---- -------
----- -------- -
------- ------ ----
------------- -
---------- - ---
-
---------- -- -
----------------------
-
----- -
------ -----------------
-
------ -
------ ---------------------------- - ---
-
--------- -
------ ----------------- --- --
-
------ -
------ ------------------
-
-这个栈可以存储任何数据类型，例如：
-- -------------------- ---- ------- --- ------ - --- ---------------- -- ----- ----------------- ----------------- -------------------------- -- --- --- ------ - --- ---------------- -- ---- --------------- --------------- -------------------------- -- -
总结
泛型是 TypeScript 提供的重要特性之一，它可以实现代码的复用性和灵活性，并让我们更好地应对不同的开发场景。在编写前端代码时，我们应该充分利用泛型这一特性，以提升我们的代码质量和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6475d280968c7c53b02d3d9f