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

先看效果

背景介绍

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

实现思路

  1. JSON 传输的实体类型仅支持基本类型(如 stringnumbernullarray 及嵌套对象),因此不考虑如 DateRegExp 等复杂类型。
  2. 字段类型可能存在多层嵌套,因此类型生成需支持递归。
  3. 一般情况下类型不会循环嵌套,但在某些框架(如 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 类型系统获得字段路径的智能提示和类型校验,有效避免字段拼写错误,提高开发效率和代码健壮性。

相关推荐
gnip1 小时前
js上下文
前端·javascript
中草药z1 小时前
【Stream API】高效简化集合处理
java·前端·javascript·stream·parallelstream·并行流
不知名raver(学python版)1 小时前
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR!
前端·npm·node.js
醉方休1 小时前
React中使用DDD(领域驱动设计)
前端·react.js·前端框架
excel1 小时前
📖 小说网站的预导航实战:link 预加载 + fetch + 前进后退全支持
前端
学习3人组1 小时前
React 样式隔离核心方法和最佳实践
前端·react.js·前端框架
世伟爱吗喽1 小时前
threejs入门学习日记
前端·javascript·three.js
朝阳5812 小时前
用 Rust + Actix-Web 打造“Hello, WebSocket!”——从握手到回声,只需 50 行代码
前端·websocket·rust
F2E_Zhangmo2 小时前
基于cornerstone3D的dicom影像浏览器 第五章 在Displayer四个角落显示信息
开发语言·前端·javascript