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

news2024/10/6 6:52:55

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.coloradmin.cn/o/1060328.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

System Generator初体验FIR滤波器

文章目录 前言一、介绍1、目标2、过程 二、步骤 1&#xff1a;在 FPGA 中创建设计1、打开 Lab1_1.slx 文件2、运行仿真3、使用 System Generator 创建 FIR 滤波器<1>、从库浏览器寻找需要的模块<2>、配置系统生成器块<3>、在 FPGA 上实现设计 三、步骤 2&…

第一章 函数 极限 连续(解题方法须背诵)

&#xff08;一&#xff09;求极限的常用方法 方法1 利用有理运算法则求极限 方法2 利用基本极限求极限 方法3 利用等价无穷小求极限 方法4 利用洛必达法则求极限 方法5 利用泰勒公式求极限 方法6 利用夹逼准则求极限 方法7 利用定积分的定义求极限 方法8 利用单调有界…

JMeter界面和字体的调整

一、界面直接调整 二、调整界面比例&#xff08;分辨率&#xff09; jmeter.hidpi.modetrue jmeter.hidpi.scale.factor2.0用记事本打开 将如下代码中的第一行和第五行的注释去掉即可 #jmeter.hidpi.modetrue # HiDPI scale factor #jmeter.hidpi.scale.factor1.0 # Suggeste…

sheng的学习笔记-【中文】【吴恩达课后测验】Course 1 - 神经网络和深度学习 - 第三周测验

课程1_第3周_测验题 目录&#xff1a;目录 第一题 1.以下哪一项是正确的&#xff1f; A. 【  】 a [ 2 ] ( 12 ) a^{[2](12)} a[2](12)是第12层&#xff0c;第2个训练数据的激活向量。 B. 【  】X是一个矩阵&#xff0c;其中每个列都是一个训练示例。 C. 【  】 a 4 […

互联网Java工程师面试题·MyBatis 篇·第一弹

目录 1、什么是 Mybatis&#xff1f; 2、Mybaits 的优点 3、MyBatis 框架的缺点 4、MyBatis 框架适用场合 5、MyBatis 与 Hibernate 有哪些不同&#xff1f; 6、#{}和${}的区别是什么&#xff1f; 7、当实体类中的属性名和表中的字段名不一样 &#xff0c;怎么办 &#x…

ERROR 6400 --- [ main] com.zaxxer.hikari.pool.HikariPool : root - Exception

在引用的日志中&#xff0c;报告了Hikari连接池初始化期间的异常。具体异常信息是"Exception during pool initialization"。这个异常可能是由于与MySQL数据库的通信链接失败导致的。在引用中也提到了与SSL连接相关的错误。 根据引用中提供的代码&#xff0c;可以看到…

docker方式启动一个java项目-Nginx本地有代码,并配置反向代理

文章目录 案例导入说明1.安装MySQL1.1.准备目录1.2.运行命令1.3.修改配置1.4.重启 2.导入SQL3.导入Demo工程3.1.分页查询商品&#xff08;仔细看代码&#xff0c;很多新的MP编程技巧&#xff09;3.2.新增商品3.3.修改商品3.4.修改库存3.5.删除商品3.6.根据id查询商品3.7.根据id…

html 高性能 简易轮播图

目标 实现简易轮播图动画效果 设计理念 无论有多少个轮播图&#xff0c;仅使用常数个轮播图tab&#xff0c;通过js替换更新dom内容&#xff0c;实现性能优化&#xff1b;使用bfc避免回流&#xff0c;&#xff08;重绘是基本上无法避免&#xff0c;不在考虑&#xff09;&#…

CompletableFuture异步回调

CompletableFuture异步回调 CompletableFutureFuture模式CompletableFuture详解1.CompletableFuture的UML类关系2.CompletionStage接口3.使用runAsync和supplyAcync创建子任务4.设置子任务回调钩子5.调用handle()方法统一处理异常和结果6.线程池的使用 异步任务的串行执行thenA…

【做题笔记】多项式/FFT/NTT

HDU1402 - A * B Problem Plus 题目链接 大数乘法是多项式的基础应用&#xff0c;其原理是将多项式 f ( x ) a 0 a 1 x a 2 x 2 a 3 x 3 ⋯ a n x n f(x)a_0a_1xa_2x^2a_3x^3\cdotsa_nx^n f(x)a0​a1​xa2​x2a3​x3⋯an​xn中的 x 10 x10 x10&#xff0c;然后让大数的…

20230922 比赛总结

反思 A 考场降智&#xff0c;没想到拆分成 2 α 5 β x 2^{\alpha}5^{\beta}x 2α5βx 的形式&#xff0c;一直在卡精度&#xff08;thx anti) B 又是随机题&#xff0c;又是 b l bl bl 题&#xff0c;差点又被区分了 C 我是 s b sb sb&#xff0c;排序顺序有点小问题…

concrt140.dll丢失怎么恢复?教你三种最简单的解决方法

今天早上&#xff0c;当我打开电脑时&#xff0c;突然看到一个提示窗口&#xff0c;显示找不到 concrt140.dll 文件。我一下子懵了&#xff0c;不知道这是怎么回事&#xff0c;也不知道如何解决这个问题。于是&#xff0c;我开始了寻找答案的旅程。首先&#xff0c;我了解到 co…

深入理解浏览器渲染原理

文章目录 浏览器是如何渲染页面的渲染流程解析HTML&#xff08;构建DOM树&#xff09;解析过程中遇到JS代码 样式计算1. 解析CSS代码2. 转换样式表中的属性值&#xff0c;使其标准化3. 计算DOM树中每个节点的具体样式CSS继承规则CSS层叠规则 布局分层分层update layer tree 绘制…

博物馆藏品管理系统-美术馆藏品管理系统

一、项目背景 文物作为前史留存下来最为珍贵的遗物&#xff0c;具有非常高的科学价值和艺术价值&#xff0c;博物馆的存在便是为了保存这些珍贵的前史文化遗产&#xff0c;所以对博物馆的建造必定要重视品质问题。对博物馆的库存办理工作也必定要注意细节&#xff0c;不能出一…

【LeetCode热题100】--20.有效的括号

20.有效的括号 使用栈&#xff1a; class Solution {public boolean isValid(String s) {Stack<Character> stack new Stack<>();int num s.length();for(int i 0;i<num;i){char c s.charAt(i);if(c(||c[||c{){stack.push(c);}else if(stack.isEmpty() ||c…

矩阵求导中的分子布局和分母布局

1.求偏导的自变量的符号区别 使用标量、向量和矩阵总共有九种可能性。请注意&#xff0c;当我们考虑每个自变量和因变量中更多数量的分量时&#xff0c;我们可能会留下非常多的可能性。下表收集了最能以矩阵形式最整齐地组织的六种导数。 在这里&#xff0c;我们使用了最一般…

AI配套的技术: 矢量数据库的概念

一、说明 随着人工智能的快速采用和围绕大型语言模型发生的创新&#xff0c;我们需要在所有这些的中心&#xff0c;能够获取大量数据&#xff0c;将其上下文化&#xff0c;处理它&#xff0c;并使其能够有意义地搜索。 为原生整合生成式 AI 功能而构建的生成式 AI 流程和应用程…

Java+Redis:布隆过滤器,打造高效数据过滤神器!

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是尘缘&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f449;点击这里&#xff0c;就可以查看我的主页啦&#xff01;&#x1f447;&#x…

基于蝴蝶优化的BP神经网络(分类应用) - 附代码

基于蝴蝶优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码 文章目录 基于蝴蝶优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码1.鸢尾花iris数据介绍2.数据集整理3.蝴蝶优化BP神经网络3.1 BP神经网络参数设置3.2 蝴蝶算法应用 4.测试结果&#xff1a;5.M…

IIC学习笔记(参考小梅哥教程)

IIC: inter-integrated circuit bus ,即 集成电路总线&#xff0c;串行通信&#xff0c;多主从架构&#xff0c;半双工&#xff08;对讲机&#xff09;&#xff0c;小数据量场合&#xff0c;短距离传输。 速率&#xff1a;100kb/s 、 400kb/s 、 3.4Mkb/s 传输单位&#xff1…