在 TypeScript 中，泛型是一种强大的工具，可以使代码更加灵活、可重用并增加类型安全性。在这篇文章中，我们将深入探讨 TypeScript 中的泛型类型，并提供一些示例代码。
什么是泛型？
泛型是一种类型参数，可以根据需要创建具有特定类型的函数和类。这是一种通用方式，可用于处理多个数据类型。泛型可以在函数定义和类定义中使用。
泛型类型
一般情况下，我们创建一个函数或者类时，需要指定参数和返回类型。例如，我们定义一个函数来处理一个数组并返回其最大值：
-- -------------------- ---- -------
-------- ------------- ---------- ------ -
--- --- - --
--- ---- - - -- - - ------------- ---- -
-- --------- - ---- -
--- - ---------
-
-
------ ----
-上述函数只能处理 number 类型的数组。如果我们需要处理其他类型的数组，例如 string 类型的数组，需要创建一个新的函数，并且这样繁琐的操作非常不方便。
这时，泛型就派上用场了。我们可以在函数定义中使用泛型类型，如下所示：
-- -------------------- ---- -------
-------- ---------------- ----- - -
--- --- - ---------
--- ---- - - -- - - ------------- ---- -
-- --------- - ---- -
--- - ---------
-
-
------ ----
-这个函数使用 <T> 标记以表示该函数是泛型函数，T 表示类型参数。然后，我们在函数参数中使用了 T[]，表示该函数可以处理任何类型的数组。同样，我们在返回类型中也使用了 T，表示该函数将返回的是一个与输入参数类型相同的值。
通过这种方式，我们可以轻松地处理任何类型的数组：
const numbers = [4, 6, 8, 2]; const strings = ["apple", "orange", "banana"]; console.log(getMax<number>(numbers)); // Output: 8 console.log(getMax<string>(strings)); // Output: "orange"
泛型函数
泛型函数是可以处理多个类型的函数。我们在函数定义中可以定义一个或者多个类型参数，通过这些类型参数来告诉 TypeScript 它们将在函数中使用。
单个类型参数
我们从一个简单的例子中开始，这个函数可以计算两个数字的和，并且支持不同类型的数字：
function add<T>(num1: T, num2: T): T {
return num1 + num2;
}
console.log(add(1, 2)); // Output: 3
console.log(add(1.5, 2.5)); // Output: 4在上面的例子中，我们使用 <T> 标记来表示该函数是一个泛型函数，并使用 T 作为类型参数。然后，我们在函数的参数和返回类型中使用了 T，表示这两个参数都是 T 类型，返回值也是 T 类型。
多个类型参数
有时，我们需要定义多个类型参数。例如，我们可以定义一个函数来接收两个数组，并且其中一个数组的元素类型可能是另一个数组的元素类型的子集：
-- -------------------- ---- -------
-------- ----------- -------- ---- ----- ----- ------- -
--- ---- - - -- - - ------------ ---- -
-- ---------------------- --- --- -
------ ------
-
-
------ -----
-
------------------------ -- --- --- -- -- ----- -- ------- ----
------------------------ -- --- ----- ---- ------- -- ------- -----在上面的例子中，我们使用了两个类型参数：T 和 U。T 表示第一个数组的元素类型，U 表示第二个数组的元素类型。因此，我们可以传递任何类型的数组。
泛型类
泛型类是可以处理多种类型的类。我们在类定义中可以定义一个或多个类型参数，在类的属性、方法和构造函数中使用这些类型参数。
单个类型参数
下面是一个简单的类，我们可以使用它来存储任何类型的数组：
-- -------------------- ---- -------
----- ---------- -
------- ------ --- - ---
---------- -- -
----------------------
-
-------------- -------- - -
------ ------------------
-
------------ ------ -
------ ------------------
-
-
----- --------- - --- ------------------
------------------
------------------
------------------
---------------------------------- -- ------- -
----------------------------------- -- ------- -
----- --------- - --- ------------------
------------------------
-------------------------
-------------------------
---------------------------------- -- ------- -------
----------------------------------- -- ------- -在上面的例子中，我们使用了 <T> 标记来表示该类是一个泛型类，并且使用 T 作为类型参数。然后，我们在类的属性、方法和构造函数中使用了 T，表示它们都是 T 类型。
多个类型参数
同样，我们可以定义多个类型参数的泛型类：
-- -------------------- ---- -------
----- ------- -- -
------- ------ --
------- ------- --
------------------ -- ------- -- -
---------- - ------
----------- - -------
-
----------- ------ -
------ ---------------- -----------------
-
-
----- ----- - --- ------------ ---------- ---------
------------------------------ -- ------- --- ------
----- ----- - --- ------------ ----------------- ---
------------------------------ -- ------- -------- --在上述例子中，我们定义了一个 Pair 泛型类，具有两个类型参数 T 和 U，然后在构造函数中使用了它们。此外，我们还添加了一个 toString 方法，用于返回一个带有括号的字符串，表示该 pair 对象的值。
总结
在 TypeScript 中，泛型是一种方便而强大的工具，它可以增加代码的灵活性、可重用性和类型安全性。通过定义泛型函数和泛型类，可以处理多个数据类型。因此，学习如何使用泛型是前端开发的必备技能之一。
希望这篇文章对您有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64acbb3848841e98948abc66