前言
TypeScript 是一种具有静态类型检查的 JavaScript 超集，它不仅能提高代码的可读性和可维护性，而且其类型检查能在编译时捕获一些常见的错误。一些高级类型能让开发者使用更方便和安全的方式进行操作。
在这篇文章中，我们将会探讨 TypeScript 高级类型的使用方法和实际应用场景，帮助开发者进一步提高代码的可读性和可维护性。
交叉类型和联合类型
交叉类型用于描述一个对象同时拥有多种类型的特征，可以通过“&”符号定义，如下所示：
-- -------------------- ---- -------
--------- --- -
----- -------
-
--------- --- -
---- -------
-
-------- ------------- ---- ----- ----- --- - ----
------ - -------- ------- --
-
----- ---- --- - --- - --------- ----- ----- -- - ---- -- ---以上代码中，我们定义了两个类型 Foo 和 Bar，然后通过 combine 函数将它们合并成了一个新的对象，并使用 & 符号声明其交叉类型为 Foo & Bar。
联合类型则表示一个对象可以为多种类型中的任意一种，可以通过“|”符号定义，如下所示：
-- -------------------- ---- -------
--------- --- -
----- -------
------- -----
-
--------- --- -
----- -------
------ -----
-
-------- ---------------- --- - ---- -
--------- -- --
----------- -- ------ -------- ------ ---- --- ----- -- ---- ---- - -----
---------- -- ------ -------- ----- ---- --- ----- -- ---- ---- - -----
-以上代码中，我们定义了两个类型 Dog 和 Cat，并在 playWithPet 函数中将它们合并成一个联合类型 Dog | Cat，在函数中我们可以访问它们共有的属性 name，但无法直接访问其特有的方法 bark 或 mew。
类型别名和接口
类型别名可以给一个类型起一个新的名称，它通常用于复杂的类型或类型组合的场景，可以通过 type 关键字进行定义，如下所示：
type FooBar = Foo & Bar;
const obj: FooBar = combine({ name: 'Tom' }, { age: 18 });以上代码中，我们通过 type 关键字定义了一个类型别名 FooBar，并将其作为 combine 函数的返回类型和 obj 对象的类型。
接口则可用于描述对象、函数、类等结构化数据类型，可以通过 interface 关键字进行定义，如下所示：
-- -------------------- ---- -------
--------- ---- -
----- -------
---- -------
-
-------- ----------------- ----- -
------------------ ------------- ---- --------------
-
----- ---- ---- - - ----- ------ ---- -- --
-----------------以上代码中，我们通过 interface 关键字定义了一个用户对象 User，并根据其结构标识对象 tom 和函数 displayUser 的参数类型。
映射类型和条件类型
映射类型用于从一个已有类型创建一个新的类型，它可以在新类型中添加或删除属性、修改属性的类型或修饰属性等，可以通过 keyof 关键字和索引访问符 [] 进行定义，如下所示：
-- -------------------- ---- -------
--------- ---- -
----- -------
---- -------
-
---- --------------- - -
-------- -- -- ----- --- ----
--
---- -------------- - -
-- -- ----- ---- ----
--
---- --------------- - -
-- -- ----- --- ---- - ----
--
----- ---- ---- - - ----- ------ ---- -- --
----- ------------ ------------------ - -------------------
----- ----------- ----------------- - - ----- ----- --
----- ------------ ------------------ - - ----- ------ ---- ---- --以上代码中，我们定义了三个映射类型 ReadonlyUser、PartialUser 和 NullableUser，它们分别在原类型 User 的基础上加上了只读、可选和允许为 null 的特性。
条件类型则表示一种类型因满足一些条件而发生变化，可以通过 extends 运算符进行定义，如下所示：
type IsNumber<T> = T extends number ? true : false; type TypeOf<T> = IsNumber<T> extends true ? 'number' : string; const a: TypeOf<number> = 'number'; const b: TypeOf<string> = 'string';
以上代码中，我们定义了两个条件类型 IsNumber 和 TypeOf，前者用于判断一个类型是否为 number，后者则根据 IsNumber 的结果返回字符串 'number' 或 'string'。
组合类型和条件类型的应用实例
以上我们简单介绍了 TypeScript 中的一些高级类型，下面将通过几个实例来展示这些类型的实际应用场景和指导意义。
第一例：联合判断日志级别
在工作中，我们通常会根据系统日志级别来开启或关闭一些日志输出功能，我们可以使用联合类型和条件类型来实现日志级别的判断：
-- -------------------- ---- -------
---- -------- -
------
-----
----
-
---- ------------ ------- --------- - - ------- -------------- - ------ - --------
-------- -------- ------- ---------------- -- -------- -------------- -
-- ------ -- -------------- -
----------------------
- ---- -
---------------------
-
-
---------------------- ---------- ---- --------- -- ------- --------- ---- ------
--------------------- ---- -- ------ -------- -- ---- ---- -- --- ---------- -- --------- -- ---- ----------以上代码中，我们定义了日志级别枚举 LogLevel，并通过 LogMessage 类型别名和条件类型来定义日志消息类型，在 logger 函数中根据日志级别的不同使用 console.warn 或 console.log 来输出消息，实现了简单而安全的日志功能。
第二例：映射处理 React Props
在 React 开发中，我们通常需要通过类型来描述组件的 Props，在特定场景下，我们可能需要修改 Props 中的某些属性的类型，使用映射类型则可以轻松实现这一功能：
-- -------------------- ---- -------
------ - ------- ----------- - ---- -------
---- ------- - ------- - -------- - --------
---- -------------- - -
-- -- ----- ------------- - ------- ------ - ------- - --------------
--
-------- --------------- --------------- -
------ ------- ---------- ---
-
--------- ------------ -------------- ----------- -- ------------------------ --------------以上代码中，我们使用 ButtonProps 类型描述 Button 组件的 Props，然后通过映射类型 NewButtonProps 将属性 size 的类型转换为了 NewSize 类型，最后在 MyButton 组件中使用了新的 Props 类型和 Button 组件实现了一个自定义的按钮组件。
总结
本文介绍了 TypeScript 中几种常用的高级类型，并通过实际应用场景和示例代码阐述了它们的使用方法和指导意义。通过学习和应用这些高级类型，可以让我们更加方便和安全地编写复杂的 TypeScript 代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a4e08b48841e9894149d7e