前言
TypeScript 是一种强类型的 JavaScript 超集语言，它扩展了 JavaScript 的语法，增加了静态类型检查、类继承、接口等功能，使得 TypeScript 在大型项目的开发中更加可靠、易于维护。在 TypeScript 中，高级的类型系统是最值得关注的新功能之一，通过使用高级类型，我们可以更好地利用 TypeScript 的类型检查，提高代码的可读性和可维护性。
本篇文章将会介绍 TypeScript 的高级类型，包括联合类型、交叉类型、映射类型、条件类型、递归类型等，在实际应用中，我们将会通过一些示例来说明这些高级类型的实际意义和用法。
什么是联合类型？
在 TypeScript 中，联合类型用来表示一个值可能是多种类型中的一种。它使用 | 符号来连接多个类型，例如：string | number 表示一个值可以是 string 类型或 number 类型。
示例代码：
function formatValue(value: string | number) {
return typeof value === 'string' ? value.toUpperCase() : value.toFixed(2)
}
console.log(formatValue('hello')) // 输出 HELLO
console.log(formatValue(3.1415926)) // 输出 3.14上面的代码中，我们定义了一个 formatValue 函数，它接收一个 string 或 number 类型的参数，根据参数的类型来进行不同的格式化操作。
什么是交叉类型？
在 TypeScript 中，交叉类型用来表示一个值同时具有多种类型的特性，它使用 & 符号来连接多个类型，例如：TypeA & TypeB 表示一个值既属于 TypeA 类型，又属于 TypeB 类型。
示例代码：
-- -------------------- ---- ------- --------- ----- - ----- ------- ---- ------- - --------- ----- - ------- ------- -------- ------- - -------- ---------------- ----- - ------ - ------ -------------- ----------- ----- ---- --------------- ----- -- ----------------- - ------------------------ ----- -------- ---- --- ------- --------- -------- -------- --- -- -- ------ -- ----- ---- ------- ----- -- -------
上面的代码中，我们先定义了两个接口 TypeA 和 TypeB，分别表示个人信息和工作信息。然后，我们定义了一个 getProfile 函数，它的参数类型为 TypeA & TypeB，表示它需要同时满足个人信息和工作信息。在函数中，我们使用模板字符串来拼接各种信息，最终输出一个完整的个人档案。
什么是映射类型？
在 TypeScript 中，映射类型用来从旧类型中创建新类型，并保留旧类型的特征。它使用 in 关键字来表示映射关系，例如：{ [K in keyof T]: T[K] } 表示将类型 T 中的所有属性变成可选属性。
示例代码：
-- -------------------- ---- ------- --------- ---- - ----- ------- ---- ------- ------ ------- - ---- ------------ - - -- -- ----- ------- ------- - ----- ----- ------------ - - ----- ------ ---- -- -
上面的代码中，我们定义了一个 User 接口，表示一个用户对象的基本信息。然后，我们使用映射类型将 User 转换为 OptionalUser 类型，并将所有属性变为可选属性。最后，我们定义了一个 user 变量，它的类型为 OptionalUser，可以省略任意属性。
什么是条件类型？
在 TypeScript 中，条件类型用来根据某种条件选择不同的类型。它使用 extends 关键字来表示条件，例如：T extends U ? X : Y 表示如果类型 T 继承自类型 U，则选择类型 X，否则选择类型 Y。
示例代码：
type IsString<T> = T extends string ? true : false; const str1: IsString<string> = true const str2: IsString<number> = false
上面的代码中，我们定义了一个 IsString 条件类型，它的参数类型为 T，并返回一个布尔值。如果 T 继承自 string 类型，则返回 true，否则返回 false。在代码的最后，我们创建了两个变量 str1 和 str2，它们的类型分别为 IsString<string> 和 IsString<number>，并分别赋值为 true 和 false。
什么是递归类型？
在 TypeScript 中，递归类型用来表示一个类型可以自我引用。它可以通过一个间接的辅助类型来实现自我引用，例如：type Tree<t> = { value: T, left?: Tree<t>, right?: Tree<t> } 表示一个带有左右子树的树结构。
示例代码：
-- -------------------- ---- -------
---- ------- - -
------ --
------ --------
------- --------
--
----- ----- ------------ - -
------ --
----- -
------ --
----- -
------ -
-
--
------ -
------ -
-
-上面的代码中，我们定义了一个 Tree<t> 类型，它的属性包括 value、left 和 right，其中 left 和 right 属性类型为 Tree<t>，表示它们也是一个带有左右子树的树结构。最后，我们创建了一个名为 tree 的变量，它的类型为 Tree<number>，表示一个带有数字值的树结构。
总结
本文讲解了 TypeScript 的五种高级类型：联合类型、交叉类型、映射类型、条件类型和递归类型。这些高级类型能够在开发中极大地提高代码的可读性和可维护性，有助于更好地利用 TypeScript 的类型检查功能。为了更好地理解这些类型，在实际应用中，我们提供了具体的示例代码，希望对你有所启发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c59341d20074f47a476450