在 TypeScript 中，泛型是一种非常有用的工具，可以帮助我们在编写代码时不仅能够明确类型，而且能够让代码更加灵活和可复用。本文将详细介绍 TypeScript 中的泛型，包括什么是泛型、泛型类型、泛型约束等内容，并配以使用示例，帮助读者深入理解和应用 TypeScript 中的泛型。
什么是泛型？
泛型是指在编写代码时，使用一个或多个占位符 “T” 来表示一个或多个类型，并在后续代码中将这个占位符 T 替换成具体的类型。在 JavaScript 中，我们经常会使用泛型来实现复杂的算法和数据结构，例如在数组 Sort 方法中传入一个比较器函数时，我们可以使用泛型来避免类型转换的问题。
在 TypeScript 中，泛型是一种类型约束，它允许我们在声明函数、类、接口等时使用类型参数，以实现类型的灵活定义。通常情况下，在 TypeScript 中声明泛型的格式为：
-------- --------------------- --- - - -- --- -
其中，<T> 表示泛型类型参数，其可替换成任何有效的标识符，并用于函数参数和返回类型的声明中。
泛型类型
在 TypeScript 中，有多种类型可以使用泛型来实现更加灵活的定义，常见的泛型类型有以下几种。
1. 数组泛型
在 TypeScript 中，我们可以使用泛型来定义数组类型，并指定数组元素的类型，例如：
--- -------- ------------- - --- -- -- -- --- --- -------- ------------- - --------- ---------
上述代码中，Array<number> 表示一个 number 类型的数组，Array<string> 表示一个 string 类型的数组。
2. Promise 泛型
在 TypeScript 中，Promis 是一个非常重要的异步操作模型，它可以让我们更加方便地在异步操作时处理返回值，而使用泛型可以让我们更加灵活地定义 Promise 类型，例如：
-------- ----------------- -------- ---------- -
------ --------------------- -- ----------------------- -- -- -
------ -----
--
-
-------------------------------------------- ---- -- -
------------------
--上述代码中，Promise<T> 表示一个 Promise 类型，其中 <T> 用于定义 Promise 的返回值类型，这样就可以避免使用 any 类型进行数据的操作，增加代码的可靠性和可读性。
3. 函数泛型
在 TypeScript 中，使用泛型也可以定义函数类型，例如：
-------- ---------------- --- - - ------ ---- - --- ------ - ----------------------- --------- -------------------- -- ----- ------
上述代码中，identity<T> 表示一个带有类型参数 T 的函数类型，其中函数参数和返回值都使用了类型参数 T，这样就可以保证函数参数和返回值的类型一致，并避免类型转换的问题。
泛型约束
在 TypeScript 中，泛型约束是指在对类型参数进行约束限制，使得函数、类、接口等在处理数据时能够限制数据类型范围，提高程序的可靠性和代码的复用性。常见的泛型约束方式有以下几种：
1. extends 关键字
在 TypeScript 中，使用 extends 关键字进行类型约束，例如：
-------- ----------- ------- - ------- ------ ------- --- ---- - ------------------------ -
上述代码中，<T extends { length: number }> 表示一个泛型类型参数 T，该参数必须符合 { length: number } 的条件，即必须包含 length 属性，并且该属性的类型必须是 number。这样就可以保证 logLength 函数只能处理具有 length 属性的数据类型，从而避免非法数据类型的处理。
2. keyof 关键字
在 TypeScript 中，使用 keyof 关键字进行类型约束，例如：
-------- ------------------- - ------- ----- ------- -- ---- --- ---- - ------ --------- - --- ---- - - ----- ------- ---- -- -- --- ---- - ---------------------- -------- ------------------ -- ----
上述代码中，<K extends keyof T> 表示一个泛型类型参数 K，该参数必须是 T 的 key 属性之一，这样就可以保证 getPropertyValue 函数只能操作 T 中的合法属性，避免了非法属性的操作。
3. 类型别名
在 TypeScript 中，使用类型别名进行泛型约束是一种非常简便的方式，例如：
---- ------- - ------ - ---- - ---------- -------- ----- ------- ----------- -- -- --- - - ------ - - -- - --- ------ - -------------- --- -------------------- -- -
上述代码中，type Numeric = number | null | undefined 表示一个类型别名 Numeric，将 number、null、undefined 三种类型合并成一个新的类型定义。然后在 sum 函数中，使用 <T extends Numeric> 对类型参数 T 进行约束，使得 T 的类型必须是 Numeric 中的一种。这样就可以保证 sum 函数只能操作这三种数据类型，避免其它非法数据类型的操作。
泛型应用示例
通过上述内容的学习和理解，我们现在可以使用泛型进行更加灵活的类型定义和约束，从而增加代码的可读性和可靠性。下面是一些使用泛型的应用示例，供读者参考和学习。
数组扁平化
给定一个多维数组，将其扁平化成一个一维数组，并去除其中的重复元素，例如：
-------- --------------- ---------- -------- -
------ ---------------- --------- ----- -- -
-- --------------------- -
--- - --------------------------
- ---- -
-- --------------------- -
---------------
-
-
------ ----
-- ----
-
--- --- - ---- --- --- --- ---- --- --- ---
--- ------ - -------------
-------------------- -- --- -- -- -- --上述代码中，我们使用泛型约束数组类型，并使用递归方式进行多维数组的扁平化，最后使用 reduce 方法计算去重后的一维数组。
单例模式
单例模式是一种常见的设计模式，用于保证一个类只能有一个实例，并提供一个全局访问点，例如：
----- ------------ -
------- ------ --------- -------------
------- ------ --
------- ------------------ -- -
---------- - ------
-
------ ------ --------------------- --- ------------ -
-- --------------------- -
------------------ - --- --------------------
-
------ -------------------
-
------ ----------- - -
------ -----------
-
-
--- --------- - ---------------------------------------
---------------------------------- -- -----
--- --------- - -----------------------------------
---------------------------------- -- ---
--------------------- --- ----------- -- ----上述代码中，我们使用泛型约束类定义，使得该类可以接收任何类型的数据，并使用单例模式保证了该类只能有一个实例，并且可以通过全局访问点进行访问。
总结
通过本文的学习和理解，读者应该已经掌握了 TypeScript 中泛型的基本概念、使用方法和应用示例。泛型是 TypeScript 中非常重要的特性之一，能够帮助我们构建更加灵活和可复用的类型定义，提高代码的可读性和可靠性，对于前端开发而言具有重要的指导意义和实践价值。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64798012968c7c53b057feff