请解释如何在泛型中使用条件类型 (Conditional Types)？

推荐答案

在 TypeScript 中，条件类型（Conditional Types）允许你根据类型之间的关系来选择不同的类型。条件类型的语法类似于三元运算符，形式为 T extends U ? X : Y，其中 T 是待检查的类型，U 是目标类型，X 和 Y 是根据条件选择的结果类型。

在泛型中使用条件类型时，你可以根据传入的泛型参数的类型来决定返回的类型。例如：

type IsString<T> = T extends string ? true : false;

type Result1 = IsString<"hello">; // true
type Result2 = IsString<123>; // false

在这个例子中，IsString 是一个条件类型，它检查泛型参数 T 是否是 string 类型。如果是，则返回 true，否则返回 false。

本题详细解读

1. 条件类型的基本语法

条件类型的基本语法如下：

T extends U ? X : Y

• T 是待检查的类型。
• U 是目标类型。
• X 是当 T 是 U 的子类型时返回的类型。
• Y 是当 T 不是 U 的子类型时返回的类型。

2. 在泛型中使用条件类型

在泛型中使用条件类型时，你可以根据传入的泛型参数的类型来决定返回的类型。例如：

type CheckType<T> = T extends string ? "string" : "not string";

type Result1 = CheckType<"hello">; // "string"
type Result2 = CheckType<42>; // "not string"

在这个例子中，CheckType 是一个泛型条件类型，它根据传入的 T 是否是 string 类型来决定返回 "string" 还是 "not string"。

3. 条件类型的嵌套

条件类型可以嵌套使用，以实现更复杂的类型逻辑。例如：

// www.javascriptcn.com code example
type TypeName<T> =
    T extends string ? "string" :
    T extends number ? "number" :
    T extends boolean ? "boolean" :
    "object";

type Result1 = TypeName<"hello">; // "string"
type Result2 = TypeName<42>; // "number"
type Result3 = TypeName<true>; // "boolean"
type Result4 = TypeName<{}>; // "object"

在这个例子中，TypeName 是一个嵌套的条件类型，它根据 T 的类型返回相应的字符串。

4. 条件类型与联合类型

条件类型在处理联合类型时，会进行分布式条件类型（Distributive Conditional Types）的计算。例如：

type ToArray<T> = T extends any ? T[] : never;

type Result = ToArray<string | number>; // string[] | number[]

在这个例子中，ToArray 会将联合类型 string | number 分别应用于条件类型，最终返回 string[] | number[]。

5. 条件类型的实际应用

条件类型在实际开发中非常有用，特别是在编写复杂的类型工具时。例如，你可以使用条件类型来提取函数类型的返回类型：

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

function foo() {
    return 42;
}

type FooReturnType = ReturnType<typeof foo>; // number

在这个例子中，ReturnType 是一个条件类型，它通过 infer 关键字推断出函数类型的返回类型。