TypeScript 条件类型与infer关键字的高级推断

初识条件类型

理解 条件类型是TypeScript中一种特殊的类型，它允许根据条件表达式来决定最终使用的类型。条件类型的基本语法形式为 T extends U ? X : Y，表示如果类型T可分配给类型U，则结果为类型X，否则为类型Y。

// 基本条件类型示例
type ExtractType<T, U> = T extends U ? T : never;

// 使用示例
type StringType = ExtractType<string | number | boolean, string>; // 结果为 string

注意 条件类型在泛型类型中特别有用，它们可以基于泛型参数的类型关系进行类型推断。

infer关键字的基础使用

认识 infer关键字是在条件类型中引入的，允许在条件类型内部推断类型变量。当你在条件类型的extends子句中使用infer时，TypeScript会尝试从类型中提取出一个类型变量。

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

// 使用示例
type StringFunction = () => string;
type StringReturnType = ReturnType<StringFunction>; // 结果为 string

分析 在上面的例子中，infer R会从函数类型中提取出返回类型，并赋值给R，然后在条件表达式的结果中使用它。

条件类型的高级推断技巧

1. 数组元素类型推断

掌握 通过条件类型和infer，可以精确地提取数组中的元素类型：

type ArrayElementType<T> = T extends (infer U)[] ? U : never;

// 使用示例
type StringArray = string[];
type Element = ArrayElementType<StringArray>; // 结果为 string

实践 这在编写需要处理数组元素但不破坏数组类型的工具类型时非常有用。

2. 函数参数类型推断

深入 可以推断出函数的参数类型：

type FirstParameter<T> = T extends (arg: infer U, ...args: any[]) => any ? U : never;

// 使用示例
type StringToNumber = (str: string) => number;
type FirstParam = FirstParameter<StringToNumber>; // 结果为 string

探索 你可以扩展这个模式来获取第二个、第三个或其他位置的参数类型。

3. Promise解析类型推断

应用 对于Promise类型，我们可以推断其解析后的值类型：

type PromiseValue<T> = T extends Promise<infer U> ? U : never;

// 使用示例
type StringPromise = Promise<string>;
type ResolvedValue = PromiseValue<StringPromise>; // 结果为 string

注意 这种模式在异步编程和Promise链操作中特别有价值。

4. 联合类型中的类型提取

扩展 当处理联合类型时，我们可以使用条件类型和infer来提取特定类型：

type ExtractFromUnion<T, U> = T extends U ? U : never;

// 使用示例
type AllTypes = string | number | boolean;
type StringType = ExtractFromUnion<AllTypes, string>; // 结果为 string

技巧 这种模式在需要从复杂类型中提取特定部分时非常有用。

条件类型与infer的实际应用场景

1. 深度部分类型提取

实现 创建一个可以提取嵌套对象中特定路径类型的工具类型：

type PropType<T, K extends string> = 
  K extends `${infer P1}.${infer P2}` 
    ? P1 extends keyof T 
      ? PropType<T[P1], P2> 
      : never 
    : K extends keyof T 
      ? T[K] 
      : never;

// 使用示例
type NestedObject = {
  user: {
    name: string;
    age: number;
    address: {
      city: string;
      country: string;
    }
  }
};

type NameType = PropType<NestedObject, 'user.name'>; // 结果为 string
type CityType = PropType<NestedObject, 'user.address.city'>; // 结果为 string

注意 这种类型工具可以安全地访问嵌套属性，避免在运行时出现错误。

2. 函数重载类型推断

构建 利用条件类型和infer来处理函数重载的类型推断：

type OverloadedReturnType<T> = 
  T extends {
    (...args: any[]): infer R;
    (...args: any[]): infer R1;
    // 可以添加多个重载
  } ? R : 
  T extends (...args: any[]) => infer R ? R : never;

// 使用示例
function example(x: string): string;
function example(x: number): number;
function example(x: string | number): string | number {
  return typeof x === 'string' ? x.toUpperCase() : x.toString();
}

type ReturnTypeExample = OverloadedReturnType<typeof example>; // 结果为 string | number

分析 这种技术可以处理复杂的函数重载情况，正确推断出所有可能的重载返回类型。

3. 高级工具类型：深度只读

创建 使用条件类型和infer构建一个深度只读的工具类型：

type DeepReadonly<T> = 
  T extends Function ? T :
  T extends object ? 
    { readonly [P in keyof T]: DeepReadonly<T[P]> } : 
  T;

// 使用示例
type MyObject = {
  a: number;
  b: {
    c: string;
    d: Array<{ e: number }>;
  }
};

type ReadonlyObject = DeepReadonly<MyObject>;

// 结果将是深度只读类型

应用 这种工具类型可以创建不可变的嵌套对象结构，常用于状态管理和不可变数据操作。

条件类型的分布式特性

揭示 当条件类型作用于联合类型时，它会自动分布到联合类型的每个成员上：

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

// 使用示例
type Union = string | number;
type ArrayUnion = ToArray<Union>; // 结果为 string[] | number[]

注意 这种分布式特性使得条件类型在处理联合类型时特别强大，但有时你可能需要使用[T] extends [any]来禁用分布式行为。

禁用分布式行为

实现 通过将泛型参数包装在元组中来禁用条件类型的分布式行为：

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

// 使用示例
type Union = string | number;
type NonDistributedArray = NonDistributedToArray<Union>; // 结果为 (string | number)[]

区别 对比上面的两个例子，可以看到禁用分布式行为后，整个联合类型被当作一个整体处理。

条件类型与模板字面量类型的高级应用

结合 将条件类型与模板字面量类型结合，可以创建强大的字符串操作工具类型：

// 提取字符串中的数字部分
type ExtractNumbers<S extends string> = 
  S extends `${infer Head}${infer Tail}` 
    ? Head extends `${number}` 
      ? `${Head}${ExtractNumbers<Tail>}` 
      : ExtractNumbers<Tail>
    : '';

// 使用示例
type StringWithNumbers = 'abc123def456';
type NumbersOnly = ExtractNumbers<StringWithNumbers>; // 结果为 '123456'

探索 这种模式可以用于各种字符串处理场景，如URL解析、日志格式化等。

条件类型的实际应用案例

1. 复杂状态类型管理

构建 在复杂的状态管理系统中，条件类型可以帮助精确推导状态类型：

// 假设有一个通用的状态管理系统
type State<T> = {
  data: T;
  loading: boolean;
  error: string | null;
};

// 处理API响应的助手类型
type ApiResponse<T> = {
  success: boolean;
  data: T;
  error: string | null;
};

// 将API响应映射到状态类型
type MappedState<T> = ApiResponse<T> extends { success: true; data: infer D } 
  ? State<D> & { loading: false }
  : State<null> & { loading: true; error: string };

// 使用示例
type UserResponse = ApiResponse<{ id: number; name: string }>;
type UserState = MappedState<UserResponse>; // 根据响应结果推导正确的状态类型

应用 这种模式可以确保状态类型与API响应保持一致，提供类型安全的数据处理。

2. 高级组件属性推断

实现 在React组件中使用条件类型和infer来精确推断组件属性：

// React组件的基本类型表示
type ComponentProps<T> = T extends (props: infer P) => JSX.Element ? P : never;

// 一个示例组件
function UserProfile(props: { id: number; name: string }) {
  return <div>{props.name}</div>;
}

// 推断组件属性
type ProfileProps = ComponentProps<typeof UserProfile>; // 结果为 { id: number; name: string }

扩展 这种技术可以用于创建更复杂的属性映射和转换逻辑。

条件类型的性能考虑

注意 过度复杂的条件类型可能会影响TypeScript的编译性能，特别是在大型项目中。

优化 保持条件类型相对简单，避免过深的嵌套类型推断：

// 过于复杂的条件类型可能影响性能
type ComplexType<T> = 
  T extends object 
    ? T extends { length: infer L; [key: number]: infer V } 
      ? ArrayType<T, L, V> 
      : ObjectType<T>
    : T extends number 
      ? NumberType<T>
      : StringType<T>;

// 更优化的做法是将复杂逻辑拆分为多个简单的条件类型
type IsArray<T> = T extends { length: number; [key: number]: any } ? true : false;
type ArrayElementType<T> = T extends (infer E)[] ? E : never;

type OptimizedType<T> = IsArray<T> extends true 
  ? ArrayElementType<T>[] 
  : T extends number 
    ? NumberType<T>
    : StringType<T>;

建议 在构建复杂类型系统时，考虑将逻辑拆分为多个简单类型，保持代码可读性和编译性能。

条件类型与infer的最佳实践

1. 明确命名 为你的条件类型和推断变量使用清晰、描述性的名称。

2. 保持简单 尽可能保持条件类型简单，避免过度复杂的嵌套。

3. 逐步构建 从基本类型开始，逐步构建复杂类型，而不是一次性创建复杂的类型表达式。

4. 适当注释 为复杂的类型表达式添加注释，解释其目的和工作方式。

5. 类型测试 使用示例代码测试你的类型实现，确保它们按预期工作。

// 良好的类型实现示例
/**
 * 从对象类型中提取指定键的值类型
 * @param T 源对象类型
 * @param K 要提取的键
 * @returns 键对应的值类型
 */
type PickValue<T, K extends keyof T> = T extends { [P in K]: infer V } ? V : never;

// 使用示例
type Person = {
  name: string;
  age: number;
  address: string;
};

type NameType = PickValue<Person, 'name'>; // 结果为 string
type AgeType = PickValue<Person, 'age'>; // 结果为 number

实践 遵循这些最佳实践可以帮助你构建更可靠、更易于维护的类型系统。

总结

TypeScript的条件类型与infer关键字提供了强大的类型推断能力，可以创建复杂而精确的类型转换工具。通过掌握这些高级特性，你可以编写更加类型安全、自描述的代码，减少运行时错误，提高开发效率。

记住，强大的类型工具需要谨慎使用，平衡类型安全性与开发效率，并始终考虑代码的可维护性。