typescript 分析泛型工具类Partial的实现原理理解索引查询类型

Partial实现原理

在 TypeScript 中,Partial 是一个非常有用的工具类型,它能够将一个对象类型的所有属性变为可选。Partial 的实现原理是通过使用映射类型(Mapped Type)和 keyof 关键字来实现的。
下面我们来看一下 Partial 的实现原理:

在这里插入图片描述
这里我定义了一个泛型类型 MyPartial<T>,它接受一个类型参数 T,表示我们要将其属性变为可选的对象类型。

然后,我们使用映射类型来遍历 T 中的所有属性,将它们变为可选属性。具体做法是使用 [P in keyof T]? 语法,其中 P 是一个类型变量,表示 T 中的一个属性名,keyof T 表示获取 T 的所有属性名。? 表示这个属性是可选的。

最后,我们使用 T[P] 来表示这个属性的类型,其中 T[P] 表示获取 T 中名为 P 的属性的类型。

这样,我们就得到了一个新的类型,它将 T 中的所有属性变为可选。例如,如果我们有一个类型 Person,它有两个属性 name 和 age,那么 Partial<Person> 就会将这两个属性都变为可选:
在这里插入图片描述
这样我们就可以使用 PartialPerson 类型来定义一个只包含部分属性的对象,例如
在这里插入图片描述
tips:

  • keyof T 即keyof MyPartial 表示获取MyPartial的所有键,也就是name,age
  • 在[]后面添加?(问号),表示将这些属性都变为可选的,以此来实现Partial的功能
  • 冒号后边的T[P]表示获取T中每个键值对应的类型,比如如果是’name’则类型是string,如果是’age’则类型为number
  • 最终,新类型PartialPerson和旧类型Person结构完全相同,只是让所有类型变为可选了

索引查询类型

刚刚上面用到的T[P]语法,在TS中叫做索引查询(访问)类型
作用:用来查询属性的类型
示例如下
在这里插入图片描述

在上面的代码中,我们定义了一个 Props 类型,它具有三个属性 a、b 和 c,它们的类型分别是 number、string 和 boolean。然后我们定义了两个类型别名 NumberA 和 NumberB,其中 NumberA 的类型是 number,而 NumberB 的类型是 Props 对象中属性 a 的类型,即 number 类型。

接着我们创建了两个变量 a 和 b,并分别指定它们的类型为 NumberA 和 NumberB。然后我们初始化 a 的值为 1,并将它赋值给 b。

由于 NumberA 和 NumberB 都是 number 类型,所以可以将 a 赋值给 b。这是因为 TypeScript 在类型检查时会进行类型推断和类型兼容性检查,如果两个类型兼容,那么就可以将一个类型的值赋值给另一个类型的变量。在这个例子中,NumberA 和 NumberB 都是 number 类型,因此它们是兼容的,所以可以将 a 赋值给 b。

tips : []中的属性必须存在于被查询类型中,否则会报错

同时查询多个索引类型

索引查询类型的其它使用方式:同时查询多个索引的类型
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/125450.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ChatGPT技术原理

Task03 ChatGPT技术原理 目录 阶段一&#xff1a;有监督微调Supervised fine-tuning (SFT)阶段二&#xff1a;训练回报模型&#xff08;Reward Model, RM&#xff09;阶段三&#xff1a;使用强化学习微调 SFT 模型 ChatGPT 是由 GPT-3 迭代来的&#xff0c;原有的 GPT-3 可能…

小程序入门笔记(一) 黑马程序员前端微信小程序开发教程

微信小程序基本介绍 小程序和普通网页有以下几点区别&#xff1a; 运行环境&#xff1a;小程序可以在手机的操作系统上直接运行&#xff0c;如微信、支付宝等&#xff1b;而普通网页需要在浏览器中打开才能运行。 开发技术&#xff1a;小程序采用前端技术进行开发&#xff0c;…

前后端通信到底是怎样一个过程

前后端通信是怎样 前言&#xff1a;Http协议 超文本传输协议 规定&#xff1a;每一次前后端通信&#xff0c;前端需要主动向后端发出请求&#xff0c;后端接收到前端的请求后&#xff0c;可以给出响应 1、Http报文 浏览器向服务器发送请求时&#xff0c;请求本身就是信息&…

Integrity Plus for Mac,保障网站链接无忧之选

在如今数字化的时代&#xff0c;网站链接的完整性对于用户体验和搜索引擎排名至关重要。如果您是一位网站管理员或者经常需要检查网站链接的人&#xff0c;那么Integrity Plus for Mac&#xff08;Integrity Plus&#xff09;将成为您最好的伙伴。 Integrity Plus是一款专业的…

国庆发生的那些事儿------编写了炫酷的HTML动态鼠标特效,超级炫酷酷酷!

文章目录 前言具体操作总结 前言 国庆假期的欢乐&#xff0c;当然少不了编码爱好者&#xff01;假期编写了炫酷的HTML动态鼠标特效&#xff0c;超级炫酷酷酷&#xff01;让你的页面变得更加炫酷&#xff0c;让你的小伙伴们羡慕的大神编码&#xff01;快来看看大神是如何编写的…

The directory ‘*‘ or its parent directory is not owned by the current user

python安装编译时出现如下错误 The directory /home/admin/.cache/pip/http or its parent directory is not owned by the current user and the cache has been disabled. Please check the permissions and owner of that directory. If executing pip with sudo, you may …

Linux学习之悟空派上实现OLED的无线网IP及CPU温度显示【守护进程】

起因 最近各种网购平台似乎都在推送99元的悟空派全志H3的开发板&#xff0c;出于好奇就买了一块来试试水&#xff0c;由于这块板子基本上和orangepi-Zero的硬件结构一模一样&#xff0c;所以设备树、boot这些就用orangepi现成的部件了。 因为本人比较喜欢使用SSH操作&#xff…

redis高可用(主从复制,哨兵,集群)

目录 一、主从复制&#xff1a; 1.主从复制介绍&#xff1a; 2.主从复制的作用&#xff1a; 3.主从复制流程&#xff1a; 4.搭建Redis 主从复制&#xff1a; 4.1 环境准备&#xff1a; 4.2 安装redis&#xff1a; 4.3 master节点修改 Redis 配置文件&#xff1a; 4.4 slave节点…

【数据结构与算法】树、二叉树的概念及结构(详解)

前言: &#x1f4a5;&#x1f388;个人主页:​​​​​​Dream_Chaser&#xff5e; &#x1f388;&#x1f4a5; ✨✨专栏:http://t.csdn.cn/oXkBa ⛳⛳本篇内容:c语言数据结构--树以及二叉树的概念与结构 目录 一.树概念及结构 1.树的概念 1.1树与非树 树的特点&#xff1…

【C++设计模式之装饰模式:结构型】分析及示例

装饰模式&#xff08;Decorator Pattern&#xff09;是一种结构型设计模式&#xff0c;它允许在运行时动态地给一个对象添加额外的行为。 描述 装饰模式通过创建一个包装器&#xff08;Wrapper&#xff09;来包裹原始对象&#xff0c;并在原始对象的行为前后添加额外的功能。…

前端 | AjaxAxios模块

文章目录 1. Ajax1.1 Ajax介绍1.2 Ajax作用1.3 同步异步1.4 原生Ajax 2. Axios2.1 Axios下载2.2 Axios基本使用2.3 Axios方法 1. Ajax 1.1 Ajax介绍 Ajax: 全称&#xff08;Asynchronous JavaScript And XML&#xff09;&#xff0c;异步的JavaScript和XML。 1.2 Ajax作用 …

定时器+按键控制LED流水灯模式+定时器时钟——“51单片机”

各位CSDN的uu们好呀&#xff0c;今天&#xff0c;小雅兰的内容是51单片机中的定时器以及按键控制LED流水灯模式&定时器时钟&#xff0c;下面&#xff0c;让我们进入51单片机的世界吧&#xff01;&#xff01;&#xff01; 定时器 按键控制LED流水灯模式 定时器时钟 源代…