解锁 TypeScript 魔法：递归类型实现字段路径自动推导

喻衡深2025-06-20 16:39

先看效果

背景介绍

在开发表单或表格组件时，我们通常需要为 form-item 或 table field 指定字段名，这些字段多为 string 类型。由于缺乏类型校验，字段拼写错误难以及时发现，且手动输入字段名时容易出错，影响开发效率和代码质量。借助 TypeScript 类型系统，我们可以实现字段级的类型安全校验与智能提示，从而提升开发体验并减少潜在的 Bug。

实现思路

JSON 传输的实体类型仅支持基本类型（如 string、number、null、array 及嵌套对象），因此不考虑如 Date、RegExp 等复杂类型。
字段类型可能存在多层嵌套，因此类型生成需支持递归。
一般情况下类型不会循环嵌套，但在某些框架（如 Vue 响应式系统）下，类型间可能出现循环引用。因此需对递归深度进行限制，避免类型系统栈溢出。

具体实现

1. 递归深度限制工具类型

为防止递归时出现无限循环，首先实现一个简易的"类型减法"工具，用于每次递归时递减深度计数：

ts 复制代码

/**
 * 递归深度减一的工具类型
 */
type Sub1 = [-1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

示例：

ts 复制代码

type N = 5;
type NSub1 = Sub1[N]; // 4

2. 生成类型路径的递归类型

通过递归遍历对象类型，生成所有可用的字段路径类型：

ts 复制代码

type ValueOf<T> = T[keyof T];
/**
 * 获取对象的所有字段路径
 * @param T - 目标对象类型
 * @param Depth - 递归深度，防止循环引用导致类型系统溢出
 */
type RecordPath<T, Depth extends number = 5> = Depth extends -1
  ? string
  : T extends any[]
    ? `${number}` | `${number}.${RecordPath<T[number], Sub1[Depth]>}`
    : T extends Record<string, any>
      ? ValueOf<{
          [K in keyof T]-?: K extends string
            ? `${K}` | `${K}.${RecordPath<T[K], Sub1[Depth]>}`
            : never
        }>
      : never;

当递归深度耗尽时，兜底类型为 string，防止类型系统报错。
对数组类型单独处理，生成如 xxx.${number}.yyy 的路径类型。
对对象类型递归处理，拼接当前字段名与子字段路径。
将对象的可选属性统一为必选，便于类型推导。

通过上述实现，我们可以在表单或表格开发中，利用 TypeScript 类型系统获得字段路径的智能提示和类型校验，有效避免字段拼写错误，提高开发效率和代码健壮性。