递归条件类型

递归条件类型

假设您有一个 for in 循环,突然意识到您的变量类型是字符串而不是字符串文字联合类型。因此,当您使用 tsc 编译应用程序时,您会遇到这个丑陋的错误,并且令人烦恼的是您最喜欢的 ide 很可能会在其冲刺的顶部尖叫:

element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ user: number; nice: number; sys: number; idle: number; irq: number; }'.  no index signature with a parameter of type 'string' was found on type '{ user: number; nice: number; sys: number; idle: number; irq: number; }'.ts(7053)

[!注意]只是为了向您展示它是如何完成的,我正在使用 os.cpus。在那里我尝试循环 cpu.times 这是一个对象。您可以在这里找到更多信息。所以这是有问题的代码:import { cpus } from ‘os’;const logicalcoresinfo = cpus();for (const logicalcoreinfo of logicalcoresinfo) { let total = 0; for (const type in logicalcoreinfo.times) { total += logicalcoreinfo.times[type]; // darn it, ts is upset! }}

使固定

我们需要提取逻辑coreinfo.times 中的键并从中创建一个新类型。然后我们可以利用类型断言来让 ts 相信一切都很酷,我们知道这里发生了什么。

所以让我们开始吧,对于第一部分,我们需要为自己创建一个自定义实用程序类型,这是我们最终的实用程序类型的样子:

type nestedkeysof = t extends object  ? {      [tkey in keyof t]-?:        | (tkey extends k ? keyof t[tkey] : never)        | nestedkeysof;    }[keyof t]  : never;

让我们来分解一下:

t 扩展对象 ? …:never 告诉 ts 递归遍历嵌套对象类型 t 并提取 t 内特定键的键(如果 t 是对象)。

[t 键中的 t 键]-?是一个“映射类型”,它在这里特别有用,因为我们不知道传递给该实用程序类型的对象内的键的名称。在这里,您将逻辑核心信息传递给它或任何其他对象,然后它迭代键以从中创建一个新类型。

还有-?是否可以删除可选性,以便我们拥有所有键的字符串文字联合类型。换句话说, { keyname?: string } 将被视为 { keyname: string }.

(tkey extends k ? keyof t[tkey] : never) 检查迭代中的当前键是否与传递的键 (k) 匹配,如果是,则将其中的所有键提取为字符串文字联合类型并归还它。否则它什么也不返回。

然后,如果步骤 3 没有结果,它将递归地在 t[tkey] 上应用此实用程序类型,这样我们的实用程序函数也适用于嵌套对象。这通常称为“递归条件类型”。

最后我们要求它取映射类型生成的所有类型的并集。简而言之,我们正在展平嵌套结构。

现在是时候使用它了:

interface Person {  name: string;  address: {    street: string;    city: string;  };}type KeysOfAddress = NestedKeysOf; // "street" | "city"// Or in our original example:type CpuTimesKeys = NestedKeysOf;// ...total += logicalCoreInfo.times[type as CpuTimesKeys];// ...

参考号

嵌套对象类型的 typescript keyof。

以上就是递归条件类型的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月19日 20:53:29
下一篇 2025年12月19日 20:53:41

相关推荐

  • 使用 TypeScript 构建可测试的 CloudFront 函数

    aws cloudfront functions 是一个强大的工具,用于在边缘运行轻量级 javascript 代码,允许您操作请求和响应。 但是,aws 要求这些函数用 vanilla javascript 编写,这对于喜欢 typescript 类型安全和现代语法的开发人员来说可能会受到限制。 …

    2025年12月19日
    000
  • NodeJS模块【简单说明】

    什么是模块? 假设您的 nodejs 项目中有一个 index.js 文件,您在其中使用了五个函数。但是,其中两个函数也可能在其他文件中使用。因此,您在项目中创建了三个文件,而不是一个文件: index.jsdependency1.jsdependency2.js 这里,每个javascript文件…

    2025年12月19日
    000
  • React 组件中带有“as”属性的动态 HTML 标签

    假设您正在使用 react 构建一个可重用的 组件。该部分组件呈现一个 html 标记,因为您对其进行了硬编码。 但是,在某些情况下,您可能想使用其他标签,例如 html 标签。 这是一个典型的场景,当您希望 html 更加语义化并且 seo 友好时。 解决方案是让消费者决定应该使用哪个 html …

    2025年12月19日
    000
  • 创建 CLI 来搭建扩展

    在之前的练习中,我们使用 typescript 构建了一个浏览器扩展。这涉及一系列步骤,包括创建 vite 项目并对其进行定制以满足浏览器扩展的特定要求。虽然该过程并不是特别漫长或复杂,但我们可以通过使用 node cli(命令行界面)实现自动化来进一步简化它。如果您是 cli 新手,请让我引导您完…

    2025年12月19日
    000
  • 基于 IT 的热门 CMS 比较(截至 4 月 4 日)

    DecapCMS(以前的 Netlify CMS) 统计数据:16,700 个 GitHub 星星 • 每周约 4 万次下载 • 400 多名贡献者链接:GitHub • NPM • 文档技术堆栈:框架不可知 • TypeScript 部分增长:明星增长 15%,NPM 增长 20%(6 个月)最适…

    2025年12月19日
    000
  • 掌握 TypeScript 模板文字类型:提高代码安全性和表现力

    好吧,让我们进入使用模板文字类型在 typescript 中进行编译时元编程的迷人世界。这个强大的功能使我们能够创建一些非常酷的类型级魔法,使我们的代码更安全、更具表现力。 首先,模板文字类型到底是什么?它们是一种基于字符串文字操作和创建新类型的方法。这就像拥有一种适合您类型的迷你编程语言。很整洁,…

    2025年12月19日
    000
  • React开发:Vite打包和zustand状态管理是最佳选择吗?

    React 生态圈中的打包和状态管理新技术 一位开发者抛出了一个问题,询问 React 社区最近是否有新的打包或状态管理技术值得关注。 打包技术 该开发者目前正在使用 Vite 作为构建工具,并打算抛弃 webpack。社区推荐了 Vite 社区提供的众多 React 模板,其中可以选择最简约的模板…

    2025年12月19日
    000
  • React开发:如何用Vite、React Router和Zustand构建高效应用?

    react 最新打造和状态管理技术 作为一名久经沙场的 React 开发者,最近重拾 React 已成为许多人的当务之急。随着技术的不断发展,了解当前社区的最佳实践至关重要。 打造:抛弃 Webpack,拥抱 Vite Vite 的部署生产能力已经得到验证,因此它已成为构建新项目的最佳选择之一。其快…

    2025年12月19日
    000
  • React开发新趋势:打包工具和状态管理方案该如何选择?

    React 新技术巡礼:打包与状态管理 作为一名长期使用 React 的开发人员,你回到这一领域时可能会面临新技术的选择。本文将探讨 React 生态系统中打包和状态管理领域的最新发展。 打包 你已经提到了 Vite,这是一种备受赞誉的替代品,以其出色的开发体验和生产就绪构建而闻名。在 Vite 社…

    2025年12月19日
    000
  • React开发新趋势:Vite打包和Zustand状态管理好用吗?

    react 社区的打包和状态管理新技术 提问者使用 React 已有四年经验,近期打算重新拾起 React 进行开发,希望了解社区内有哪些好用的打包和状态管理技术。以下是提问者提出的具体问题: 打包技术:是否推荐使用最新的 CLI 推荐?状态管理:在 Vite 环境下,有哪些推荐的替代方案? 回答:…

    2025年12月19日
    000
  • 使用 Cloudflare Workers 实施 Gmail 发送 – 开发指南

    这是使用 cloudflare workers 实施 gmail 发送系列的第 2 部分: 第 1 部分:设置 ✅第 2 部分:开发环境(当前)第 3 部分:实施(即将推出) 介绍 在第 1 部分中设置 gmail api 访问权限后,我们现在将为 cloudflare workers 配置开发环境…

    2025年12月19日
    000
  • Angular’s Biggest Misconception: “It’s Not Worth Learning Due to Fewer Jobs”

    在选择前端框架时,对 Angular 的一个常见误解是学习它不值得,因为“没有足够的工作机会”。让我们揭穿这个神话并探索 Angular 在就业市场中的现实地位。 为什么会存在这种误解? 这种信念源于将 Angular 职位发布数量与 React 进行比较。在许多地区,React 职位的数量通常超过…

    2025年12月19日
    000
  • 处理 Javascript/Typescript 中的错误:自定义异常和结果

    诸如调用 api 或验证用户输入的数据之类的操作在开发中非常常见,并且是可以给出正确结果或失败的函数的示例。一般来说,为了在 javascript(和其他语言)中控制它,我们通常使用并创建简单的异常。 它们似乎是控制我们正在开发的应用程序或程序可能出现的错误的最简单方法。然而,随着项目和团队的成长,…

    2025年12月19日
    000
  • TypeScript项目中:import 和 require 导入模块有何区别?

    typescript 与模块化 在 TypeScript 项目中,我们可以既使用 import 来导入第三方库,也可以通过 require 来引入。这两种方式分别代表了 ES Module 和 CommonJS Module 这两种模块化方式。 在打包构建项目时,我们可以选择将代码打包为 ESM 或…

    2025年12月19日
    000
  • TypeScript项目中如何兼容NodeJS fs模块和ESM导出?

    TypeScript 项目中使用 NodeJS fs 模块与 ESM 导出 在 TypeScript 项目中,可以同时使用 import 和 require 来引入三方库。这两种方式分别用于 ESM(ECMAScript 模块)和 CJS(CommonJS 模块)模块化引入。import 用于 ES…

    2025年12月19日
    000
  • TypeScript项目中使用NodeJS fs模块会如何影响ESM打包?

    在 TypeScript 项目中使用 NodeJS fs 模块对打包成 ESM 模块的影响 在 TypeScript 项目中,确实可以同时使用 import 和 require 语句来引入第三方库。前者用于导入 ESM 模块,而后者用于导入 CJS 模块。两者之间的区别在于,ESM 模块采用 ES6…

    2025年12月19日
    000
  • Node.js项目中TypeScript文件执行失败:ts-node无法识别.ts文件的原因是什么?

    为什么在 nodejs 项目中不能在 typescript 项目 ts-node 执行.ts 文件? 在 typescript 项目中使用 ts-node 执行 .ts 文件时遇到无法识别.ts 文件后缀的错误,该问题可能是由于以下原因造成的: 1. package.json 中 “ty…

    2025年12月19日
    000
  • TypeScript 与 JavaScript:哪一个更好?

    随着对现代 Web 应用程序的需求不断增长,开发人员经常发现自己在项目中在 TypeScript 和 JavaScript 之间争论。虽然两者都是前端和后端开发不可或缺的一部分,但它们的用途略有不同。但您如何决定使用哪一个呢?本博客探讨了 TypeScript 和 JavaScript 的主要区别、…

    2025年12月19日
    000
  • TypeScript项目中ts-node无法执行.ts文件怎么办?

    “cannot execute .ts files in typescript project using ts-node” 在typescript项目中,无法执行.ts文件可能源于以下原因: 1. package.json 中的 “type”: “module&…

    2025年12月19日
    000
  • 每个 JavaScript 项目的必备要素

    作为一名开发人员,特别是如果您是团队的新手,增加价值的最快方法之一就是引入改进日常工作流程的工具。这些工具有助于维护代码质量、确保一致性并简化开发流程。以下是我认为任何 javascript 项目都必须具备的要素的列表: 1. 使代码格式保持一致 工具:更漂亮一致的代码格式可以减少代码审查期间的“挑…

    2025年12月19日
    000

发表回复

登录后才能评论
关注微信