TypeScript类型挑战:实现RequiredByKeys实用类型

​内置的必填泛型不够灵活,RequiredByKeys 泛型来救场。

为了帮助读者更好地巩固 TypeScript 的知识,我从 Github 上的 type-challenges 库中选择了几十个挑战,与您一起完成类型挑战。

挑战
 

实现一个通用的  RequiredByKeys<T, K>  方法,它接受两个类型参数  T  和  K 。

K  指定了  T  的属性集,这些属性应该设置为必需的。当没有提供  K  时,它应该像正常的  Required<T>  一样设置所有必需的属性。

例如:

interface User {  name?: string  age?: number  address?: string}
type UserRequiredName = RequiredByKeys<User, 'name'> // { name: string; age?: number; address?: string }


解决方案
 

我们的类型挑战是实现  RequiredByKeys<T, K>  泛型,当  K  没有提供时,它应该像普通的  Required<T>  一样提供所有所需的属性。

Required< T >

构造一个类型,其中包含  Type  的所有属性设置为 required。

Required<T>  是 TypeScript 的内置工具类型,在  typescript/lib/lib.es5.d.ts  文件中定义:

/** * Make all properties in T required. * typescript/lib/lib.es5.d.ts */type Required<T> = {    [P in keyof T]-?: T[P];};

 Required<T>  泛型在内部使用了 TypeScript 的映射类型,其语法如下

其中  P in K  类似于 JavaScript 中的  for...in  语句,用于遍历类型  K  中的所有类型,以及类型变量  T ,用于表示 TypeScript 中的任何类型。

你也可以在映射过程中使用额外的修饰符只读和问号(?) 。通过添加加号( )和减号(-)前缀来添加和删除相应的修饰符。如果不添加前缀,默认使用加号。

在介绍了映射类型的相关知识之后,实现  RequiredByKeys  泛型的思路就非常简单了。

从上图可以看出,我们只需要选择与 K 相关的属性,按照需要设置并生成一个新的对象类型,然后根据剩下的属性构建另一个对象类型,最后使用  &  操作符将上述两个对象类型组合成一个新的对象类型。

像专家一样使用 TypeScript 的交集类型你应该知道的关于 TypeScript 交集类型的细节。当你学习 TypeScript 时,你可以把类型理解为值的集合,icon-default.png?t=N7T8https://mp.weixin.qq.com/s?__biz=MzU3NjM0NjY0OQ==&mid=2247485067&idx=1&sn=7de40cecc1daec297a5c5f18b838e6bb&chksm=fd1409fdca6380ebc23e31077815561d182197481150167639b5b1f32a7e67d0a5379a794cc7&token=1779636375&lang=zh_CN#rd

完整代码
 

最后,让我们看一下完整的代码:

TypeScript 4.1 允许我们使用 as 子句在映射类型中重新映射键,其语法如下:

type MappedTypeWithNewKeys<T> = {    [K in keyof T as NewKeyType]: T[K]    //            ^^^^^^^^^^^^^    //            New Syntax!}

其中NewKeyType的类型必须是 string | number | symbol 联合类型的子类型,在重新映射键的过程中,我们可以通过返回never类型来过滤键。

 Merge  泛型的作用是合并对象类型,除了上述的解决方案,还有一种更简洁的方式。

type RequiredByKeys<T, K = keyof T> = Merge<  T & {    [P in keyof T as P extends K ? P : never]-?: T[P]  }>

这个挑战涉及到的主要知识是 TypeScript 的映射类型,如果你想了解更多关于映射类型的信息,可以阅读以下文章:

像专家一样使用TypeScript映射类型icon-default.png?t=N7T8http://mp.weixin.qq.com/s?__biz=MzU3NjM0NjY0OQ==&mid=2247484965&idx=1&sn=3e95787a17188b63769934fc42c5d72f&chksm=fd140953ca638045cf19f7915e04221ff2bc7d24aaa83f752b430e01d08c37baacf277e24876&scene=21#wechat_redirect

如果你有其他的解决方案,你可以给我发消息。

 欢迎关注公众号:文本魔术,了解更多

 

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

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

相关文章

四、Qt 的第一个demo

在上一篇章节里《三、Qt Creator 使用》&#xff0c;我们介绍了如何使用Qt Creator创建一个简单的带窗体的demo&#xff0c;在这一章节里&#xff0c;我们详细讲解一下这个demo的文件组成&#xff0c;及主函数&#xff0c;并在UI上加一些控件&#xff0c;实现一些简单的功能。 …

【面试突击】Java面试底层逻辑(HashMap、ConcurrentHashMap面试实战)

&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308; 欢迎关注公众号&#xff08;通过文章导读关注&#xff1a;【11来了】&#xff09;&#xff0c;及时收到 AI 前沿项目工具及新技术 的推送 发送 资料 可领取 深入理…

js封装根据年月日获取星座效果demo(整理)

//根据年月日获取星座 function getZodiacSign(dateString) {// 用法:const dateStr 2024-01-11;// const zodiacSign getZodiacSign(dateStr);const date new Date(dateString);const month date.getMonth() 1;const day date.getDate();if ((month 1 && day &…

利用Monte Carlo进行数值积分(二)

进步空间很大的算法版本 话说去年6月的一个周六&#xff0c;我很无聊地发了一个帖子&#xff0c;写了一个自己感觉有点无聊的帖子。 Matlab多重积分的两种实现【从六重积分到一百重积分】https://withstand.blog.csdn.net/article/details/127564478 这个帖子居然成了我这种懒…

Video接口介绍

屏库 https://m.panelook.cn/index_cn.php Open LDI, open lvds display interface OpenLDI and LVDS是兼容的&#xff0c; 是一种电平 https://www.ti2k.com/178597.html MIPI DSI/Camera crosLink FPD-LINK(Flat panel display link)是National(TI) LVDS技术&#xff0c; …

NUS CS1101S:SICP JavaScript 描述:五、使用寄存器机进行计算

原文&#xff1a;5 Computing with Register Machines 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 我的目标是表明天堂机器不是一种神圣的生命体&#xff0c;而是一种钟表&#xff08;相信钟表有灵魂属性的人将制造者的荣耀归功于作品&#xff09;&#xff0c;因为…

网络安全B模块(笔记详解)- 漏洞扫描与利用

漏洞扫描与利用 1.通过Kali对服务器场景server2003以半开放式不进行ping的扫描方式并配合a,要求扫描信息输出格式为xml文件格式,从生成扫描结果获取局域网(例如172.16.101.0/24)中存活靶机,以xml格式向指定文件输出信息(使用工具Nmap,使用必须要使用的参数),并将该操…

8. 自定义分页

EmployeeMapper.java自定义接口 /*** <p>* 查询 : 根据lastName查询员工列表&#xff0c;分页显示* </p>** param page 分页对象,xml中可以从里面进行取值,传递参数 Page 即自动分页,必须放在第一位(你可以继承Page实现自己的分页对象)* param lastName 状态* retu…

《工具录》fierce

工具录 1&#xff1a;fierce2&#xff1a;选项介绍3&#xff1a;示例 本文以 kali-linux-2023.3-vmware-amd64 为例。 1&#xff1a;fierce fierce 是开源的网络安全工具&#xff0c;用于进行域名扫描和子域名枚举。 官方网址&#xff1a;https://github.com/mschwager/fierc…

ubuntu20.04安装cuda11.4以及cudnn

系统&#xff1a;ubuntu20.04硬件配置&#xff1a;GPU3080、CPU未知通过《软件和更新》在附加驱动选项中添加了驱动&#xff1a; 1.检查自己电脑支持的cuda nvidia-smi4. 下载cuda11.4.2 wget https://developer.download.nvidia.com/compute/cuda/11.4.2/local_installers/c…

二十几种未授权访问漏洞合集

未授权访问漏洞是一个在企业内部非常常见的问题&#xff0c;这种问题通常都是由于安全配置不当、认证页面存在缺陷&#xff0c;或者压根就没有认证导致的。当某企业对外的服务端口、功能无限制开放&#xff0c;并且对用户的访问没有做任何限制的时候&#xff0c;可能会泄露出某…

别再用老掉牙的技术了!试试微服务架构!从零教你认识、开发、部署微服务

从0带你认识、开发、部署微服务&#xff08;一&#xff09; 1.认识微服务 随着互联网行业的发展&#xff0c;对服务的要求也越来越高&#xff0c;服务架构也从单体架构逐渐演变为现在流行的微服务架构。这些架构之间有怎样的差别呢&#xff1f; 1.0.目标 微服务架构的优缺点…

Visual Studio Code1.67版本已正式发布,新增Rust指南

Visual Studio Code1.67版本已正式发布&#xff0c;该版本包含大量增强生产力的更新项&#xff1a; 资源管理器文件嵌套 通过这次更新&#xff0c;用于浏览和管理文件和文件夹的Visual Studio Code的资源管理器工具现在支持基于名称嵌套相关文件。 资源管理器现在支持根据文…

【Vue2】一个数组按时间分割为【今年】和【往年】俩个数组

一. 需求 后端返回一个数组&#xff0c;前端按时间维度将该数组的分割为【今年】和【往年】俩个数组后端返回的数组格式如下 timeList:[{id:1,billTime:"2024-01-10",createTime:"2024-01-10 00:00:00",status:0},{id:2,billTime:"2022-05-25"…

【天龙怀旧服】攻略day7

关键字&#xff1a; 新星1.49、金针渡劫、10灵 1】新星&#xff08;苍山破煞&#xff09; 周三周六限定副本&#xff0c;19.00-24.00 通常刷1.49w&#xff0c;刷149点元佑碎金 boss选择通常为狂鬼难度&#xff0c;八风不动即放大不选&#xff0c;第二排第一个也不选&#xf…

鸿蒙HarmonyOS兼容JS的类Web开发

鸿蒙HarmonyOS兼容JS的类Web开发 文章目录 鸿蒙HarmonyOS兼容JS的类Web开发文件组织目录结构文件访问规则媒体文件格式 js标签配置pageswindow示例 app.js应用生命周期应用对象6 HML语法参考页面结构数据绑定普通事件绑定冒泡事件绑定5捕获事件绑定5列表渲染条件渲染逻辑控制块…

josef约瑟 中间继电器 HJDZ-E440额定电压:AC220V 卡轨安装

HJDZ-静态中间继电器 系列型号&#xff1a; HJDZ-A200静态中间继电器&#xff1b;HJDZ-A110静态中间继电器&#xff1b; HJDZ-A002静态中间继电器&#xff1b;HJDZ-A004静态中间继电器&#xff1b; HJDZ-E112静态中间继电器&#xff1b;HJDZ-E112L静态中间继电器&#xff1…

element中el-cascader级联选择器只有最后一级可以多选

文章目录 一、前言二、实现2.1、设置popper-class和multiple2.2、设置样式 三、最后 一、前言 element-ui中el-cascader级联选择器只有最后一级可以多选&#xff0c;其它级只有展开子节点的功能&#xff0c;如下图所示&#xff1a; 可以观察到最后一级的li节点上没有属性aria-…

JVM内存结构 vs. Java对象模型 vs. Java内存模型

文章目录 0.三者的区别1.JVM内存结构2.Java对象模型3.Java内存模型&#xff08;JMM&#xff09;3.1 为什么需要JMM3.2 JMM是规范3.3 JMM是工具类和关键字的原理3.4 最重要的三点内容 0.三者的区别 JVM内存结构&#xff1a;和Java虚拟机的运行时区域有关。 Java对象模型&#…