深入理解TypeScript递归类型:构建深层可写属性并规避深度限制

深入理解TypeScript递归类型:构建深层可写属性并规避深度限制

本文深入探讨了在typescript中构建一个能够递归地提取类字段属性、排除函数、并正确处理可选性及各种嵌套数据结构(如对象、数组、map、set)的深层可写(deepwritable)类型。文章详细分析了导致“类型实例化深度过大”错误的原因,并提供了一种优化后的解决方案,确保类型安全和性能。

TypeScript深层可写类型:递归属性提取与深度限制规避

在TypeScript中,我们经常需要处理复杂的数据结构,特别是在需要修改对象部分属性时,保持类型安全至关重要。一个常见的需求是创建一个“深层可写”类型,它能够递归地遍历一个类的所有可写字段,同时排除方法(函数),并正确处理字段的可选性。然而,在实现此类递归类型时,我们可能会遇到TypeScript的“类型实例化深度过大且可能无限”(Type instantiation is excessively deep and possibly infinite)错误。本文将详细解析这个问题,并提供一个健壮的解决方案。

问题背景与挑战

我们的目标是为类的 set 方法提供一个类型安全的参数,该参数允许我们更新类的部分属性,且这些属性必须是可写的,并能深入到嵌套的对象、数组、Map和Set中。

初始尝试通常会涉及以下几个关键类型:

IfEquals: 一个用于比较两个类型是否完全相等的辅助类型。WritableKeys: 筛选出类型 T 中非函数且非只读的属性键。DeepWritable: 核心递归类型,用于将 T 的所有可写属性转换为深层可写形式。

然而,在实现 DeepWritable 时,尤其是当它需要处理 Map、Set、数组以及普通对象等多种递归结构时,很容易触及TypeScript的类型检查深度限制,导致上述错误。

核心辅助类型

在深入解决递归问题之前,我们先定义一些基础的辅助类型:

// 1. IfEquals: 比较两个类型是否完全相等type IfEquals =  (() => T extends X ? 1 : 2) extends  (() => T extends Y ? 1 : 2) ? A : B;// 2. WritableKeys: 提取类型T中可写的(非函数、非只读)属性键type WritableKeys = {  [P in keyof T]: T[P] extends Function ? never : IfEquals}[keyof T];// 3. DeepWritablePrimitive: 定义深层可写类型中的基本类型type DeepWritablePrimitive = undefined | null | boolean | string | number | Function;

WritableKeys 通过 IfEquals 巧妙地判断属性是否为只读,并通过 T[P] extends Function ? never : … 排除函数类型。

解决“类型实例化深度过大”错误

原始的 DeepWritable 类型在处理 Map 和 Set 等复杂泛型时,可能因为检查顺序或内部实现方式导致递归深度过大。为了解决这个问题,我们需要优化 DeepWritable 的结构,特别是对不同数据结构的判断顺序。

文心大模型 文心大模型

百度飞桨-文心大模型 ERNIE 3.0 文本理解与创作

文心大模型 56 查看详情 文心大模型

关键的改进点在于:

Map类型的优先处理:将 Map 的检查放在 T extends (infer U)[] 之后但在 DeepWritableRecord 之前。这是因为 Map 类型本身是一个泛型接口,如果处理不当,可能导致编译器在递归解析时陷入困境。通过先检查 Map,我们可以更明确地引导编译器。正确处理可选性:原始的 DeepWritableObject 在处理 WritableKeys 时可能会丢失属性的可选性。我们需要确保在构造新类型时保留原始属性的可选状态。

下面是优化后的 DeepWritable 及其辅助类型 DeepWritableRecord:

// 优化后的 DeepWritable 类型type DeepWritable =  | T extends DeepWritablePrimitive ? T // 基本类型直接返回  : T extends (infer U)[] ? DeepWritable[] // 数组递归处理元素  : T extends Map ? ( // 优先处理 Map 类型      T extends Map ? Map<K, DeepWritable> : never    )  : T extends Set ? Set<DeepWritable> // Set 递归处理元素  : DeepWritableRecord; // 其他对象类型递归处理// 优化后的 DeepWritableRecord 类型,保留可选性type DeepWritableRecord = {  // 使用 Pick 筛选出可写键,并保留其原始的可选性  [K in keyof Pick<T, WritableKeys>]: DeepWritable}

解释:

DeepWritable 类型现在首先检查基本类型,然后是数组。关键点:Map 的检查被提前。如果一个类型 T 是 Map 的实例,它会通过 Map 提取键 K 和值 V 的类型,然后递归地将值 V 转换为 DeepWritable。Set 类型的处理紧随其后。最后,对于所有不匹配上述条件的类型,我们将其视为普通对象,并委托给 DeepWritableRecord。DeepWritableRecord 使用 Pick<T, WritableKeys> 来首先从原始类型 T 中选择那些可写的属性键,这样可以保留这些属性的原始可选性。然后,它递归地将这些属性的值转换为 DeepWritable。

完整示例代码

让我们将这些类型应用到一个实际的类结构中:

// 辅助类型定义 (如上所示)type IfEquals =  (() => T extends X ? 1 : 2) extends  (() => T extends Y ? 1 : 2) ? A : B;type WritableKeys = {  [P in keyof T]: T[P] extends Function ? never : IfEquals}[keyof T];type DeepWritablePrimitive = undefined | null | boolean | string | number | Function;// 优化后的 DeepWritable 类型定义 (如上所示)type DeepWritable =  | T extends DeepWritablePrimitive ? T  : T extends (infer U)[] ? DeepWritable[]  : T extends Map ? (      T extends Map ? Map<K, DeepWritable> : never    )  : T extends Set ? Set<DeepWritable>  : DeepWritableRecord;type DeepWritableRecord = {  [K in keyof Pick<T, WritableKeys>]: DeepWritable}// 示例类结构class Base {  // set 方法接受一个 Partial<DeepWritable> 类型的参数  set(data?: Partial<DeepWritable>) {    Object.assign(this, data);  }}class Parent extends Base {  name?: string; // 可选属性  age: number = 0; // 必选属性  readonly id: string = 'some-id'; // 只读属性,应被排除  private _secret: string = 'secret'; // 私有属性,类型系统通常不直接处理,但如果通过公共方法暴露则需注意  someMethod() { return 'hello'; } // 方法,应被排除  arr?: Parent[]; // 嵌套数组  dataMap?: Map; // 嵌套 Map  dataList?: Set; // 嵌套 Set}const record = new Parent();// 使用 set 方法更新属性record.set({  name: 'New Name', // 更新可选属性  age: 30, // 更新必选属性  // id: 'new-id', // 错误:'id' 是只读属性,已被 WritableKeys 排除  // someMethod: () => 'new hello', // 错误:'someMethod' 是函数,已被 WritableKeys 排除  arr: [{ // 嵌套数组    name: 'Child 1',    age: 5  }, {    name: 'Child 2',    arr: [{ name: 'Grandchild 1' }] // 更深层次的嵌套  }],  dataMap: new Map([ // 嵌套 Map    ['key1', { name: 'Map Child 1', age: 10 }],    ['key2', { name: 'Map Child 2' }]  ]),  dataList: new Set(['item1', 'item2']) // 嵌套 Set});console.log(record);console.log(record.arr?.[0]?.name); // Child 1console.log(record.arr?.[1]?.arr?.[0]?.name); // Grandchild 1console.log(record.dataMap?.get('key1')?.name); // Map Child 1// 验证类型检查:尝试设置只读属性或方法会报错// record.set({ id: 'test' }); // Error: Type '{ id: string; }' has no properties in common with type 'Partial<DeepWritable>'.// record.set({ someMethod: () => {} }); // Error: Type '{ someMethod: () => void; }' has no properties in common with type 'Partial<DeepWritable>'.

注意事项与总结

类型检查顺序至关重要:在递归类型中,对不同数据结构的检查顺序会影响TypeScript的类型推断性能和是否触发深度限制。将 Map 等复杂泛型放在数组之后、普通对象之前处理,通常能有效规避“深度过大”错误。保留可选性:使用 Pick<T, WritableKeys> 结合 keyof 是一个优雅的方式,既能筛选出可写属性,又能保持这些属性在原始类型中的可选性。DeepWritablePrimitive 的作用:明确定义基本类型可以作为递归的终止条件,防止无限递归。只读和函数属性的排除:WritableKeys 类型确保了我们只处理可修改的字段,提高了类型安全性。私有属性:TypeScript的类型系统通常只关注公共(public)和受保护(protected)的属性。私有属性 (private) 在类型层面通常不会被 keyof T 捕获,因此不会被 DeepWritable 处理。

通过上述优化,我们成功构建了一个健壮的 DeepWritable 类型,它不仅能够递归地处理复杂的嵌套结构,排除不必要的属性,还能有效避免TypeScript的类型实例化深度限制,为应用程序提供了更强大的类型安全保障。

以上就是深入理解TypeScript递归类型:构建深层可写属性并规避深度限制的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/309824.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
Java自定义类toString()方法:优化对象打印输出
上一篇 2025年11月5日 04:49:52
win11此电脑的图标不见了怎么办_win11此电脑图标消失修复方法
下一篇 2025年11月5日 04:49:57

相关推荐

  • JS注解怎么和TypeScript结合_ JS注解在TypeScript环境下的应用

    TypeScript 支持通过配置 allowJs 和 checkJs 在 JavaScript 文件中识别 JSDoc 注解并进行类型检查,可在混合项目中提升类型安全;常见用法包括 @type、@param、@returns 和 @typedef,能为变量、函数参数等提供类型信息,支持与 .ts …

    2026年5月10日
    000
  • TypeScript函数体中如何高效判断参数类型?

    typescript 函数体中判断参数类型的技巧 typescript 中,我们可以定义接口来表示不同的数据类型。在本文中,我们将探讨如何在函数体中判断参数的类型,从而实现类型收窄,进行更精细的类型检查。 使用谓词函数 一种方法是编写谓词函数来手动检查类型。谓词函数返回的是 value is som…

    2026年5月10日
    000
  • JS如何实现策略模式

    策略模式通过封装算法使其可互换,JavaScript中利用函数作为一等公民实现,适用于表单验证等场景,结合工厂模式提升灵活性,但应避免过度设计。 策略模式的核心在于定义一系列算法,并将每一个算法封装起来,使它们可以相互替换。这使得算法可以在不影响客户端的情况下发生变化。在JS中,这可以通过函数作为一…

    2026年5月10日
    000
  • Svelte中正确导入数据与组件:避免常见误区

    在svelte开发中,理解如何正确导入数据和组件至关重要。svelte文件定义的是组件而非普通javascript模块,若需共享纯数据,应使用`.js`文件进行导出。本文将详细阐述svelte的导入机制,并通过示例代码展示如何区分导入数据与渲染组件,从而避免常见的导入错误,确保项目结构清晰且功能正确…

    2026年5月10日
    300
  • 如何通过GitHub API高效获取超过100个用户列表(分页教程)

    本教程旨在解决使用GitHub API获取用户列表时遇到的默认100个用户限制问题。我们将详细介绍两种主要的分页策略:利用Octokit库内置的paginate方法实现自动化分页,以及手动实现基于since参数的循环分页逻辑。文章将提供清晰的代码示例,并强调在不同场景下选择合适方法的注意事项,特别是…

    2026年5月10日
    100
  • 前端构建优化:利用常量折叠提升应用性能

    本文深入探讨了一种在构建阶段执行部分源代码以进行优化的技术——常量折叠(Constant Folding)。通过在编译时预计算表达式并替换为最终结果,该技术显著减少了运行时开销,提升了应用性能。文章将详细解释其工作原理、优势,并探讨其在现代前端构建工具中的应用与配置,旨在帮助开发者实现更高效的代码优…

    2026年5月10日
    000
  • 动态语言中静态类型的讽刺

    c++kquote>您也可以在 medium 上阅读这篇文章。 当我们看到编程语言如何随着时间的推移而演变时,总是很有趣。 曾几何时,当我开始进入软件开发世界时,python、php 和 javascript 等动态语言因其灵活性和适合快速开发的简洁语法而受到赞赏。 然而,随着这些弱类型语言的…

    2026年5月10日
    000
  • 为什么 TypeScript 比 JavaScript 更好

    javascript 长期以来一直是 web 开发的基石,支持从小型脚本到大型应用程序的各种项目。然而,随着项目规模的扩大,javascript 的动态类型和缺乏结构性可能会成为开发的瓶颈。typescript 应运而生,它凭借静态类型检查和强大的工具集,迅速成为许多开发者构建可靠、可扩展应用程序的…

    2026年5月10日
    100
  • 深入解析Angular中循环计算与数组操作的常见陷阱及优化实践

    本文深入探讨了angular应用中处理循环计算和动态数组时常见的逻辑错误。通过一个租金计算器示例,我们分析了`for`循环中未能正确累加迭代值以及数组填充不当的问题,并提供了详细的解决方案,包括优化计算逻辑、正确使用数组`push`方法,以及遵循typescript和javascript的最佳实践,…

    2026年5月10日
    000
  • Angular Material Table 数据源的正确绑定与异步数据处理

    在 Angular 应用中,将异步获取的数据正确绑定到 Material Table 的 `MatTableDataSource` 是一个常见挑战。本文将深入探讨 `MatTableDataSource` 的初始化时机,特别是如何处理数据加载的异步性,确保表格能够实时、准确地渲染数据,并提供一个结构…

    2026年5月10日
    000
  • JS注解怎么标注只读属性_ JS对象只读属性的注解方法与使用

    使用JSDoc的@readonly可标注只读属性以提升开发体验,但需结合Object.defineProperty设置writable为false才能实现运行时保护,TypeScript的readonly关键字则能在编译阶段阻止修改,提供更强的类型检查。 在JavaScript中,给对象属性设置只读…

    2026年5月10日
    100
  • JS注解怎么标注索引签名_ JS索引签名的注解书写与实际应用

    TypeScript中通过索引签名语法为对象的动态属性标注类型,如[key: string]: type,支持字符串和数字两种索引类型;实际用于配置对象、API响应、缓存等场景,并需注意属性兼容性与类型精确性。 在JavaScript中,并没有“注解”(annotation)这一语法特性,像Java…

    2026年5月10日
    000
  • Angular:优化表格数据结构与动态渲染,实现API驱动的正确选项图标显示

    本教程旨在解决Angular应用中根据API响应在HTML表格中动态显示正确选项图标的问题。通过引入优化的数据模型,结合Angular的*ngFor指令进行数据迭代渲染,以及*ngIf指令进行条件性图标显示,实现了一种可扩展、易维护的解决方案。文章详细阐述了数据模型的构建、组件逻辑的实现以及模板层面…

    2026年5月10日
    000
  • VSCode内置了哪些编程语言插件?

    vscode 内置语言插件一览 VSCode 已内置多款语言插件,免除安装市场插件的步骤。以下是如何查看内建语言插件: 快捷键 Ctrl+Shift+P 唤出命令窗口输入并选择 “Show Built-in Extensions”左侧出现的 “Programmin…

    2026年5月10日
    000
  • 如何高效提取并管理Prisma客户端扩展类型

    本文旨在解决Prisma客户端扩展中类型管理的复杂性问题。当开发者尝试将Prisma客户端扩展模块化到独立文件中时,由于Prisma生成的类型结构复杂,直接提取扩展对象的类型变得困难。我们将通过结合使用TypeScript的`Parameters`和`Extract`工具类型,展示如何精确地从`$e…

    2026年5月10日
    000
  • Webpack 5与React应用中图片资源加载策略详解

    Webpack 5与React应用中图片资源加载策略详解Webpack 5与React应用中图片资源加载策略详解Webpack 5与React应用中图片资源加载策略详解Webpack 5与React应用中图片资源加载策略详解

    本文深入探讨了在Webpack 5和React项目中正确加载图片资源的方法。通过分析常见的图片路径引用问题,详细介绍了Webpack 5内置的资产模块(Asset Modules)作为现代解决方案,并提供了在React组件和CSS/SCSS中引用图片的具体代码示例。同时,也探讨了将图片放置于公共文件…

    2026年5月10日 用户投稿
    100
  • 如何不重新打包H5项目就能最大限度地更新页面?

    无需重新打包,高效更新H5页面 H5项目开发中,快速更新页面内容而不需重新打包是提升效率的关键。本文针对Vue项目,探讨如何在不重新打包的前提下,最大程度地更新页面。 常用更新方法 几种常见的页面更新方法: 条件渲染: 根据服务器返回的数据,控制组件的显示与隐藏。数据驱动渲染: 利用服务器数据动态生…

    2026年5月10日
    100
  • 为什么每个开发人员都应该学习 TypeScript:我的经验

    TypeScript已成为现代Web开发的颠覆性技术。起初,JavaScript是我处理前后端所有任务的首选语言。但随着项目规模的扩大,我开始面临挑战:运行时错误、代码库混乱以及对应用稳定性的担忧。这时,我决定尝试TypeScript,从此便爱上了它。 本文将深入探讨我的TypeScript学习历程…

    2026年5月10日
    000
  • React中API数据处理与.map渲染:类型定义与状态管理实践

    本文深入探讨了在react应用中使用`.map`方法渲染api数据时常见的“数据结构不匹配”问题。核心在于api返回的数据结构与组件预期的或typescript接口定义的不一致。教程将详细指导如何通过精确定义数据接口、优化react状态初始化以及正确访问数据属性来解决此类问题,确保数据能够被正确且高…

    2026年5月10日
    000
  • 解决动态添加元素 Tailwind CSS 类不生效问题

    当在项目中动态创建 dom 元素并为其添加 tailwind css 类时,有时会遇到样式不生效的问题,即使类名已正确添加到元素上。本教程将深入探讨导致此问题的常见原因,包括类属性语法错误、tailwind css purge/jit 配置不当以及 dom 元素生命周期等,并提供详细的解决方案和最佳…

    2026年5月10日
    100

发表回复

登录后才能评论
关注微信