随着 TypeScript 越来越受欢迎，开发者们对其理解也逐渐加深，逐渐掌握了如何使用基本类型、接口、类、泛型等基础语法。今天我们要介绍 TypeScript 中的条件类型 Conditional Types，并通过示例代码展示它在前端开发中的应用。
条件类型简介
条件类型 Conditional Types 是 TypeScript 2.8 引入的一项新特性。在定义泛型时，可能需要根据传入的泛型参数类型来决定返回的类型。条件类型可以实现这一目标。换句话说，条件类型可以让你在类型系统中加入逻辑分支。
在 TypeScript 中，条件类型的语法如下：
(type extends U ? X : Y)
其中，type 是待检查的类型，U 是已知类型，X 是如果 type 是 U 类型时返回的类型，Y 是如果 type 不是 U 类型时返回的类型。
接下来，让我们看一下条件类型的应用实践。
条件类型应用实践
1. 消除可选属性的 undefined
在前端开发中，我们经常需要从服务器获取一些数据，然后将这些数据展示在页面上。但是，每次从服务器获取的数据都可能会存在一些可选属性，这些可选属性的值有可能是 null 或者 undefined。而在 TypeScript 中，当你定义了一个类型中的属性为可选属性时，这个属性的值默认是 undefined。
在这种情况下，如果开发者想要将可选属性值赋给一个变量或者对象，就需要进行判断，以消除掉 undefined。下面是一个处理可选属性的示例代码：
-- -------------------- ---- -------
---- ----------- - -
-- -- ----- ---- -----
--
---- ----------- - -
-- -- -------------- -----
- - -
-- -- ------------- -- ---------------- -----
--
---- --------------------- - -
-- -- ----- ----- --------- ------- ---- - - - ------
------- ---
---- ------------ - ----- --
---- --------------------- - -
-- -- -------------- -----
--
---- ------------------- - -
-- -- ----- --- ------------------
--
---- ---------------- - ------- -----------------------
---- ---------------- - ------- -----------------------
---- ------------------- - ---------------
-------- ----------------------- ------------- ----------- -
----- ------- --- - ---
--- ------ - -- ---- -
-- ----------------------- -
-- ------- --- ---------- -
--------- - -------
-
-
-
------ ------ -- ------------
-
--------- ----- -
--- -------
----- -------
----- -------
-
----- ------------------- ----- - -
--- ----
----- ------
--
----- ----- --------------- - ------------------------------------上面代码中，我们定义了一个类型为 Optional<T> 的泛型，它将类型中所有可选属性的值改为了 undefined；然后我们定义了一个函数 removeUndefined，它可以用来消除掉类型中所有可选属性的 undefined。最后，我们将返回值转换成了该类型的必选项。
2. 排除某个属性
在前端开发中，有时候我们需要排除某个属性或属性值，这时候条件类型就可以有所帮助了。下面是示例代码：
type MyExclude<T, U> = T extends U ? never : T; type NumOrStr = 'a'|2|'b'|3; type Type = MyExclude<NumOrStr, string>;
上面代码中，我们定义了一个类型 NumOrStr，它包含了两种类型，一种是 string，一种是 number，然后我们通过条件类型的方式将其转化成了只包含 number 类型的类型 Type。
3. 关于 infer 关键字的使用
在 TypeScript 中，关键字 infer 用于推断出类型变量。通过 infer 关键字，可以轻松地操作和创建类型。下面是一个示例：
type ReturnValue<T> = T extends (...args: any[]) => infer R ? R : any; type Fn = (a: number, b: string) => boolean; type R = ReturnValue<Fn>;
上面代码中，我们定义了一个类型 ReturnValue<T>，它从一个 T 类型推断出返回值的类型。在这里，Fn 是一个函数类型，我们通过 ReturnType 获取了它的返回值类型并给 R 赋值。最终，输出 R 的类型为 boolean。
总结
本文介绍了 TypeScript 中的条件类型 Conditional Types，并通过示例代码展示了它在前端开发中的应用。在实践中，条件类型可以帮助我们更加灵活地操作和创建类型，提高了代码的可读性和可维护性。深入掌握条件类型对于提高 TypeScript 编程的效率和水平至关重要，相信随着大家用的越来越多，也可以取得更多的学习和掌握。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e0a5dcf6b2d6eab3bc74b2