TypeScript 递归提取类型参数的一个实战案例

源代码：

  type RecursivePartial<T> = {
    [P in keyof T]?: T[P] extends Array<infer U>
      ? Array<RecursivePartial<U>>
      : T[P] extends object
      ? RecursivePartial<T[P]>
      : T[P];
  };

这段代码定义了一个 TypeScript 的类型工具 RecursivePartial<T>，其主要功能是将某个类型 T 的所有属性变为可选，同时递归地应用到嵌套的对象和数组中。以下是详细解析，包括逐个 token 的解释，以及其所涉及的重要 TypeScript 语言特性。

逐个 Token 的详细解析

type
TypeScript 的 type 关键字用于定义自定义类型。这里定义了一个新类型 RecursivePartial。
RecursivePartial<T>
RecursivePartial 是类型的名称，<T> 是一个泛型占位符，表示这个工具类型可以接受任意类型 T 作为输入。通过泛型参数化，RecursivePartial 能够适用于不同的类型，而不仅仅是固定的类型。
=
定义类型的等号，表示 RecursivePartial<T> 是右侧类型的别名。
{ [P in keyof T]?: ... }
这部分是 TypeScript 的 **映射类型 (Mapped Type)**。
- keyof T：这是一个关键字，获取类型 T 的所有属性键组成的联合类型。例如，对于类型 { a: number; b: string }，keyof 会返回 'a' | 'b'。
- [P in keyof T]：这是遍历 T 所有键的语法，P 是占位符变量，表示当前迭代到的属性键。
- ?:：将每个属性标记为可选属性。
T[P] extends Array<infer U>
这部分使用了 TypeScript 的 条件类型 (Conditional Type)，判断当前属性的类型是否为数组。
- T[P]：表示类型 T 中键 P 对应的属性值的类型。
- extends：用于类型约束或类型条件判断。
- Array<infer U>：这是一个模式匹配的语法，infer 表示推断数组元素的类型。例如，number[] 匹配 Array<infer U> 时，U 推断为 number。
? Array<RecursivePartial<U>>
如果当前属性是数组，则递归地对数组元素的类型应用 RecursivePartial，并返回新数组的类型。
: T[P] extends object
否则，检查当前属性是否是一个对象（非数组的对象）。
- object：这里表示任何非原始类型的对象（包括嵌套对象）。
? RecursivePartial<T[P]>
如果是对象，则递归地对这个对象的属性应用 RecursivePartial。
: T[P]
如果既不是数组也不是对象，则直接返回原始类型 T[P]。

涉及的重要 TypeScript 语言特性

泛型 (Generics)
泛型提供了灵活性，使 RecursivePartial 能够接受任意类型并适配不同的场景。
条件类型 (Conditional Types)
extends 和 ? : 的组合用于实现类型的条件判断，使工具类型能够动态地处理不同的情况。
映射类型 (Mapped Types)
P in keyof T 是映射类型的核心，用于对类型的所有属性进行遍历和变换。
推断 (Infer)
infer U 允许从数组类型中提取元素类型，这在处理嵌套数组时非常有用。
递归类型
类型可以自引用，允许定义嵌套结构，支持复杂类型的递归应用。

实例与真实世界案例

示例代码

假设我们有一个深度嵌套的接口类型：

interface UserProfile {
  name: string;
  age: number;
  preferences: {
    theme: string;
    languages: string[];
  };
  friends: Array<{
    name: string;
    hobbies: string[];
  }>;
}

使用 RecursivePartial 工具类型：

type PartialUserProfile = RecursivePartial<UserProfile>;

PartialUserProfile 的类型等效于：

{
  name?: string;
  age?: number;
  preferences?: {
    theme?: string;
    languages?: string[];
  };
  friends?: Array<{
    name?: string;
    hobbies?: string[];
  }>;
}

真实世界中的应用场景

配置对象的类型定义
在大型应用中，通常会有复杂的配置对象，例如 Web 应用的主题设置。开发者需要为用户提供部分配置，而不是全量配置。这时 RecursivePartial 就非常有用，允许用户只定义需要覆盖的部分配置。
```
interface ThemeConfig {
  colors: {
    primary: string;
    secondary: string;
  };
  fonts: {
    size: number;
    family: string;
  };
}

const partialConfig: RecursivePartial<ThemeConfig> = {
  colors: {
    primary: "#FF5733",
  },
};
```
数据模型更新
在数据库更新操作中，开发者可能需要部分更新某个数据模型。这种情况下，RecursivePartial 类型可以确保更新对象的灵活性，同时保持类型安全。
前端表单的动态绑定
在动态表单生成器中，表单可能绑定一个复杂的嵌套数据模型，用户的输入只会更新部分字段。RecursivePartial 可以完美地为这种场景提供类型支持。

秒客网