TypeScript 是一种由 Microsoft 开发的用于构建大型 JavaScript 应用程序的开源编程语言。它是 JavaScript 的超集，通过添加静态类型注释和其他扩展功能来提供更好的类型安全和代码可读性。
除了静态类型之外，TypeScript 还提供了许多其他的功能，其中包括条件类型。在本文中，我们将介绍什么是条件类型，以及如何在 TypeScript 中使用它们。
什么是条件类型
条件类型是 TypeScript 中的一种高级类型，它可以根据某些条件来确定一个类型。它通常是用于泛型类型中，以根据传入的参数来确定返回值的类型。
下面是一个基本的条件类型示例：
type Check<T> = T extends string ? string : number; const a: Check<string> = "hello"; // a 的类型为 string const b: Check<number> = 42; // b 的类型为 number
在这个例子中，我们定义了一个类型 Check<T>，它根据泛型参数 T 是否为 string 类型来确定返回值类型。如果 T 是 string 类型，那么返回值类型就是 string；否则，返回值类型就是 number。
这个例子中使用了条件运算符 ? 和 :。这是一个三元运算符，它的作用是根据条件来选择返回值。在这种情况下，它的条件是 T extends string，如果成立就返回 string，否则返回 number。
如何在 TypeScript 中使用条件类型
现在我们知道什么是条件类型，接下来我们来看看如何在 TypeScript 中使用它们。
1. 基本的条件类型
首先，我们来看一个基本的条件类型示例，根据类型是否 string 来确定返回值类型：
type Check<T> = T extends string ? string : number; const a: Check<string> = "hello"; // a 的类型为 string const b: Check<number> = 42; // b 的类型为 number
在这个例子中，我们定义了一个类型 Check<T>，它根据泛型参数 T 是否为 string 类型来确定返回值类型。如果 T 是 string 类型，那么返回值类型就是 string；否则，返回值类型就是 number。
2. 条件类型与联合类型
我们可以将条件类型与联合类型一起使用，以根据不同的参数类型来确定返回值类型。例如，下面的示例根据参数类型是否为数组来确定返回值类型：
type Result<T> = T extends any[] ? T[number] : T; const a: Result<string> = "hello"; // a 的类型为 string const b: Result<number[]> = 42; // b 的类型为 number
在这个例子中，我们定义了一个类型 Result<T>，它根据泛型参数 T 是否为数组类型来确定返回值类型。如果 T 不是数组类型，那么返回值类型就是 T；否则，返回值类型就是数组中元素的类型（即 T[number]）。
3. 条件类型与映射类型
我们还可以将条件类型与映射类型一起使用，以在对象类型中根据属性类型来确定返回值类型。例如，下面的示例根据对象中的属性类型是否为字符串来确定属性强制转换为大写：
-- -------------------- ---- ------- ---- ---------------- - - -- -- ----- --- ---- ------- ------ - ------------ - -- -- ----- ----- - - ----- -------- ---- -- -- ----- ------- -------------------- ------ - - ----- ------- ---- ----- --展开代码
在这个例子中，我们定义了一个类型 UppercaseKeys<T>，它根据对象类型 T 中的属性类型是否为字符串来确定属性强制转换为大写。如果属性类型是字符串，那么就将属性名转换为大写；否则，属性名就保持原样。
我们使用了 TypeScript 中的两个关键字 keyof 和 in。keyof 是用于获取对象类型的键的类型，而 in 则是用于遍历对象类型的键。
总之，条件类型是 TypeScript 中的一种强大的类型工具，它可以帮助我们根据某些条件来确定类型。通过结合泛型类型、联合类型和映射类型，我们可以使用条件类型来创建更加灵活和高效的 TypeScript 代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c81722e46428fe9ee15273
