TypeScript 是一种支持静态类型的 JavaScript 超集，它为 JavaScript 增加了类型推导、类型检查等功能。TypeScript 中的条件类型和分布式条件类型是两种非常强大的类型工具，它们可以用来解决很多复杂的类型问题。本文将详细介绍 TypeScript 中条件类型和分布式条件类型的应用，并提供一些示例代码来帮助读者理解。
条件类型
TypeScript 中的条件类型是一种类型工具，它可以根据条件来选择两种不同的类型中的一种。具体来说，它可以这样定义：
type MyConditionalType<A, B> = A extends B ? A : B;
上面的代码中，MyConditionalType 是一个类型别名，它接受两个类型参数 A 和 B。如果类型 A 可以赋值给类型 B，那么 MyConditionalType<A, B> 的结果就是类型 A。否则，MyConditionalType<A, B> 的结果就是类型 B。
例如，我们可以定义一个类型 IsString<T>，它表示类型 T 是否为字符串类型：
type IsString<T> = MyConditionalType<T, string>;
由于条件类型的特性，我们可以使用 IsString<T> 对任意类型进行判断：
type A = IsString<"hello">; // A 的类型是 "hello" type B = IsString<123>; // B 的类型是 string
上面的代码中，IsString<T> 可以根据 T 是否为字符串类型来选择两个类型中的一种，从而得出正确的结果。
分布式条件类型
TypeScript 中的分布式条件类型是一种特殊的条件类型，它可以将一个联合类型拆分成多个条件类型，并操作每个条件类型。具体来说，它可以这样定义：
type MyDistributiveConditionalType<A> = A extends any ? MyConditionalType<A, string> : never;
上面的代码中，MyDistributiveConditionalType 是一个分布式条件类型，它接受一个类型参数 A。如果 A 是一个联合类型，那么 MyDistributiveConditionalType<A> 的结果就是一个由 A 中每个类型生成的条件类型组成的联合类型。否则，MyDistributiveConditionalType<A> 的结果就是 never 类型。
例如，我们可以定义一个类型 StrOrNum<T>，它表示类型 T 是字符串类型或数字类型：
type StrOrNum<T> = MyDistributiveConditionalType<T>;
由于分布式条件类型的特性，我们可以使用 StrOrNum<T> 对任意联合类型进行操作：
type A = StrOrNum<"hello" | 123>; // A 的类型是 "hello" | string | number
上面的代码中，StrOrNum<T> 操作 "hello" | 123 时，会将它拆分成 "hello" 和 123 两个类型的条件类型组成的联合类型。只要 T 是联合类型，就可以通过分布式条件类型将它拆分成多个条件类型进行操作。
应用案例
下面，我们将介绍两个应用案例，这些案例展示了条件类型和分布式条件类型在 TypeScript 中的实际应用。
操作联合类型中的某些成员
有时候，我们需要对一个联合类型中的某些成员进行操作，而不是对整个联合类型进行操作。例如，我们有一个 Person 类型，它可能是一个对象、一个数组或一个字符串：
type Person = { name: string } | Array<{ name: string }> | string;我们想要定义一个函数 getName，它可以从 Person 类型中获取 name 属性的值。如果 Person 是一个对象或数组，那么 getName 应该返回一个字符串数组。如果 Person 是一个字符串，那么 getName 应该返回一个空字符串数组。
我们可以使用条件类型和分布式条件类型来实现这个函数：
type GetNameFromObject<T> = T extends { name: string } ? T["name"] : never;
type GetNameFromArray<T> = T extends Array<{ name: string }> ? T[number]["name"] : never;
type GetNameFromString<T> = T extends string ? "" : never;
type GetName<T> = MyDistributiveConditionalType<T> extends infer U ? U extends any ? GetNameFromObject<U> | GetNameFromArray<U> | GetNameFromString<U> : never : never;上面的代码中，我们定义了三个条件类型 GetNameFromObject、GetNameFromArray 和 GetNameFromString，它们分别对象、数组和字符串的 name 属性进行操作。然后，我们使用分布式条件类型将 Person 拆分成多个条件类型，并在每个条件类型上应用对应的条件类型。最后，我们将每个条件类型的结果合并成一个联合类型。
我们可以使用这个函数来获取 Person 中的 name 属性：
type Person = { name: string } | Array<{ name: string }> | string;
type A = GetName<Person>; // A 的类型是 string[]上面的代码中，GetName<Person> 的类型是 string[]，它表示 Person 中所有对象和数组的 name 属性的值。
操作对象的某些属性
有时候，我们需要定义一个类型，它是一个对象类型，但只包含一些属性。例如，我们有一个 Person 类型，它包含 name、age、gender 和 email 四个属性：
type Person = {
name: string;
age: number;
gender: "male" | "female";
email: string;
};我们想要定义一个类型 PersonWithoutEmail，它是 Person 类型的子集，但不包含 email 属性。我们可以使用类型映射和条件类型来实现这个类型：
type PersonWithoutEmail = {
[K in keyof Person]: K extends "email" ? never : Person[K]
};上面的代码中，我们使用类型映射生成一个新的对象类型，它的属性类型和 Person 的属性类型一致。但如果属性名称是 email，那么属性类型就是 never，表示该属性不存在。然后，我们使用条件类型将这个新的对象类型转换成一个真正的类型。
我们可以使用这个类型来创建一个扩展版的 Person 类型：
type PersonWithoutEmail = {
[K in keyof Person]: K extends "email" ? never : Person[K]
};
type PersonPlus = PersonWithoutEmail & { phone: string };上面的代码中，我们定义了一个新的类型 PersonWithoutEmail，它是 Person 类型的子集，但不包含 email 属性。然后，我们使用交叉类型将 PersonWithoutEmail 和一个包含 phone 属性的对象类型合并成一个新的扩展版的 Person 类型。
总结
本文介绍了 TypeScript 中条件类型和分布式条件类型的应用，并提供了一些示例代码来演示这些类型工具的功能和用法。条件类型和分布式条件类型是非常强大的类型工具，它们可以帮助我们解决很多复杂的类型问题，例如操作联合类型中的某些成员、操作对象的某些属性等。学习条件类型和分布式条件类型可以提升我们的 TypeScript 编码能力，让我们更好地使用 TypeScript 来构建高质量的前端应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646d682f968c7c53b0c178db