当前位置: 首页 > news >正文

TypeScript中的类型映射

类型映射

1. 简介

映射就是将一种类型按照映射规则,转成另一种类型,通常用于对象类型。

这里类型B通过A采用属性名索引的写法,完成了类型B的定义

type A = {foo: number;bar: number;
};type B = {[prop in keyof A]: string;
};

这里复制了一个一样的类型,类型B原样复制了类型A

type A = {foo: number;bar: string;
};type B = {[prop in keyof A]: A[prop];
};

为了增加代码复用性,可以把常用的映射写成泛型。

这里定义了一个泛型,可以将其他对象的所有属性值都改成 boolean 类型。

type ToBoolean<Type> = {[Property in keyof Type]: boolean;
};

不使用联合类型,直接使用某种具体类型进行属性名映射,也是可以的。

type MyObj = {[p in 'foo']: number;
};// 等同于
type MyObj = {foo: number;
};

上面示例中,p in 'foo'可以看成只有一个成员的联合类型,因此得到了只有这一个属性的对象类型。

通过映射,可以把某个对象的所有属性改成可选属性。比如ts 的内置工具类型Partial<T>,就是这样实现的。

type A = {a: string;b: number;
};type B = {[Prop in keyof A]?: A[Prop];
};

上面示例中,类型B在类型A的所有属性名后面添加问号,使得这些属性都变成了可选属性。

ts内置的工具类型Readonly<T>可以将所有属性改为只读属性,实现也是通过映射。

// 将 T 的所有属性改为只读属性
type Readonly<T> = {readonly [P in keyof T]: T[P];
};
// 用法如下。
type T = { a: string; b: number };type ReadonlyT = Readonly<T>;
// {
//   readonly a: string;
//   readonly b: number;
// }

2. 映射修饰符

映射会原样复制原始对象的可选属性和只读属性,如果想要删除可选和只读这两个特性,并不太方便,所以为了解决这个问题,ts引入了两个修饰符,用来移除映射时添加或移除可选属性或者只读属性。

  • +修饰符:写成+?+readonly,为映射属性添加?修饰符或readonly修饰符。
  • 修饰符:写成-?-readonly,为映射属性移除?修饰符或readonly修饰符。

这里添加、移除了可选属性,+?-?要写在属性名的后面

// 添加可选属性
type Optional<Type> = {[Prop in keyof Type]+?: Type[Prop];
};// 移除可选属性
type Concrete<Type> = {[Prop in keyof Type]-?: Type[Prop];
};

这里添加、移除只读属性,+readonly-readonly要写在属性名的前面。

// 添加 readonly
type CreateImmutable<Type> = {+readonly [Prop in keyof Type]: Type[Prop];
};// 移除 readonly
type CreateMutable<Type> = {-readonly [Prop in keyof Type]: Type[Prop];
};

如果同时增删?readonly这两个修饰符,写成下面这样。

// 增加
type MyObj<T> = {+readonly [P in keyof T]+?: T[P];
};// 移除
type MyObj<T> = {-readonly [P in keyof T]-?: T[P];
}

ts 原生的工具类型Required<T>专门移除可选属性,就是使用-?修饰符实现的。

另外,–?修饰符移除了可选属性以后,该属性就不能等于undefined了,实际变成必选属性了。但是,这个修饰符不会移除null类型。

另外,+?修饰符可以简写成?+readonly修饰符可以简写成readonly

3. 键名重映射

1. 语法

ts4.1引入了键名重映射,允许改变键名,就是在键名映射的后面加上as +新类型字句,新类型字句一般是模板字符串,用来对原键名的操作。

type A = {foo: number;bar: number;
};type B = {[p in keyof A as `${p}ID`]: number;
};// 等同于
type B = {fooID: number;barID: number;
};

上面示例中,类型B是类型A的映射,但在映射时把属性名改掉了,在原始属性名后面加上了字符串ID

可以看到,键名重映射的语法是在键名映射的后面加上as + 新类型子句。这里的“新类型”通常是一个模板字符串,里面可以对原始键名进行各种操作。

2. 属性过滤

键名重映射可以过滤某些属性。

3. 联合类型的映射

因为键名重映射可以修改键名类型,所以原始键名的类型不必是string|number|symbol,任意的联合类型都可以用来进行键名重映射。

type S = {kind: 'square',x: number,y: number,
};type C = {kind: 'circle',radius: number,
};type MyEvents<Events extends { kind: string }> = {[E in Events as E['kind']]: (event: E) => void;
}type Config = MyEvents<S|C>;
// 等同于
type Config = {square: (event:S) => void;circle: (event:C) => void;
}

上面示例中,原始键名的映射是E in Events,这里的Events是两个对象组成的联合类型S|C。所以,E是一个对象,然后再通过键名重映射,得到字符串键名E['kind']

相关文章:

TypeScript中的类型映射

类型映射 1. 简介 映射就是将一种类型按照映射规则&#xff0c;转成另一种类型&#xff0c;通常用于对象类型。 这里类型B通过A采用属性名索引的写法&#xff0c;完成了类型B的定义 type A {foo: number;bar: number; };type B {[prop in keyof A]: string; };这里复制了一…...

系统平台同一网络下不同设备及进程数据通讯--DDS数据分发服务中间件

系列文章目录 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 TODO:写完再整理 文章目录 系列文章目录前言(1)中间件的介绍(2)DDS介绍(3)发布者(4)订阅者(5)idl文件(定义msg结构体)(6)QoS(Quality of Service)策略(7)DDS测试工具介绍(…...

golang小技巧

1/有时需要把json内容返回给前段进行文本编辑json字段&#xff0c;那么最好是能返回格式化后的json&#xff0c;这样对于用户编辑页方便。这时候可以利用json.MarshalIndent(data, "", "\t")来进行格式化&#xff0c;带有缩进的marshal。 2/对holders的填…...

JavaWeb——IDEA操作:Project最终新建module

在project中创建新的module&#xff1a; 创建一个新的module很容易&#xff0c;但是它可能连接不上Tomcat&#xff0c;因此需要修改一些配置&#xff1a; 将以下地址修改为新module的地址...

前端开发技术栈(工具篇):2023深入了解webpack的安装和使用以及核心概念和启动流程(详细) 63.3k stars

目录 Webpack简介 Entry Module Chunk Loader Plugin Output Webpack的启动流程 Webpack的优缺点 Webpack的使用 1. 安装Webpack 2. 创建Webpack配置文件 3. 编写代码 4. 运行Webpack 5. 在HTML中引入打包后的文件 6. 执行编译命令 Webpack其他功能介绍 1. 使…...

[SQL开发笔记]LIKE操作符:在 WHERE 子句中搜索列中的指定模式

一、功能描述&#xff1a; LIKE操作符&#xff1a;用于在 WHERE 子句中搜索列中的指定模式。 二、LIKE操作符语法详解&#xff1a; LIKE 语法 SELECT column1, column2,…FROM table_nameWHERE column LIKE pattern; 参数说明&#xff1a; &#xff08;1&#xff09;colum…...

flutter深研

https://www.douyin.com/video/7020336319058627853 关闭系统风扇 在 Windows 操作系统上安装和配置 Flutter 开发环境 - Flutter 中文文档 - Flutter 中文开发者网站 - Flutter...

TypeScript中的declare关键字

declare关键字 1. 简介 declare关键字用来告诉编译器&#xff0c;某个类型是存在的&#xff0c;可以在当前文件中使用。 作用&#xff1a;就是让当前文件可以使用其他文件声明的类型。比如&#xff0c;自己的脚本使用外部库定义的函数&#xff0c;编译器会因为不知道外部函数…...

玫瑰红葡萄酒的基本知识

在过去的几年里&#xff0c;玫瑰红葡萄酒越来越受欢迎&#xff0c;但是如果你是饮用玫瑰红葡萄酒的新手&#xff0c;你可能想知道它是如何从其他红葡萄酒或白葡萄酒中脱颖而出的。 玫瑰红具有标志性的粉色&#xff0c;很难归类&#xff0c;那它是更适合放在红酒类还是属于白酒…...

HTTP 协议参考文档

开发者Web协议文档&#xff1a; https://developer.mozilla.org/zh-CN/docs/Web 其中子节点包含 HTTP 协议内容&#xff1a; https://developer.mozilla.org/zh-CN/docs/Web/HTTP 其内容是基于 markdown 编写的&#xff0c;对应源文件在 Github 中&#xff0c;如下&#xf…...

Python遍历删除列表元素的一个奇怪bug

假定有一个Python列表&#xff0c;比如[CFFEX.IF, CFFEX.TS,SHFE.FU]&#xff0c;现在需要将其中带‘CFFEX’前缀的所有元素都删除。在使用列表推导式一行代码搞定之前&#xff0c;用了一种最朴素的遍历删除方法&#xff0c;结果出现了意想不到的的问题。复盘了下&#xff0c;结…...

Elasticsearch部署中的两大常见问题及其解决方案

随着大数据和实时搜索的日益普及&#xff0c;Elasticsearch已经成为现代应用中不可或缺的工具。但是&#xff0c;像所有软件一样&#xff0c;部署和配置Elasticsearch可能会遇到一些问题。本文将探讨两个我最近遇到的常见问题及其解决方案。 问题描述 1. 主机名解析问题 在启…...

【计网 CDN】计算机网络 CDN(Content Delivery Network)分布式网络架构详解:中科大郑烇老师笔记 (八)

目录 0 引言1 为什么需要分布式的网络架构&#xff1f;2 视频流化服务2.1 多媒体&#xff1a;视频2.2 存储视频的流化&#xff08;Streaming&#xff09;服务2.3 流媒体传输协议&#xff1a;DASH2.4 面临挑战&#xff1a;服务器如何向上百万用户同时提供视频流化内容&#xff1…...

C# 图解教程 第5版 —— 第9章 表达式和运算符

文章目录 9.1 表达式&#xff08;*&#xff09;9.2 字面量9.2.1 整数字面量9.2.2 实数字面量9.2.3 字符字面量9.2.4 字符串字面量 9.3 求值顺序9.3.1 优先级9.3.2 结合性 9.4 简单算术运算符9.5 求余运算符9.6 关系比较运算符和相等比较运算符9.7 递增运算符和递减运算符&#…...

TIA博途_Profinet通信故障诊断及常见错误解决方法汇总

TIA博途_Profinet通信故障诊断及常见错误解决方法汇总 1. 在线诊断报硬件组件的用户数据错误,设备组态不支持 解决方法: (1)检查模块终端盖板; (2)检查组态模块与实际组装模块顺序型号是否一致。 2. 网络视图,设备视图界面显示黑色感叹号 解决方法: PLC转离线,下载硬…...

Windows server部署filebeat到kafka

需求&#xff1a;Windows dhcp日志需要实时传输到elk或者其他告警平台。 1、filebeat下载地址&#xff1a;https://www.elastic.co/cn/downloads/beats/filebeat 2、下载后解压后配置filebeat.yml文件&#xff0c; 3、README.md文件中有运行的操作方法&#xff1a;cmd上进入f…...

Interview of ING internship for master thesis: LLM

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 1. Background2. Interview2.1 Intro2.2 project experience2.3 问题2.4 Q&A 总结 Interview of ING internship for master thesis: LLM 1. Background Proje…...

华为校招第三题 找最小数

给你一个以字符串表示的非负整数 num 和一个整数 k &#xff0c;移除这个数中的 k 位数字&#xff0c;使得剩下的数字最小。请你以字符串形式返回这个最小的数字。 示例 1 &#xff1a; 输入&#xff1a;num "1432219", k 3 输出&#xff1a;"1219" 解…...

大数据Flink(一百零三):SQL 表值聚合函数(Table Aggregate Function)

文章目录 SQL 表值聚合函数(Table Aggregate Function) SQL 表值聚合函数(Table Aggregate Function) Python UDTAF,即 Python TableAggregateFunction。Python UDTAF 用来针对一组数据进行聚合运算,比如同一个 window 下的多条数据、或者同一个 key 下的多条数据等,与…...

php+JavaScript实现callback跨域请求jsonp数据

摘要 JSONP 是 JSON with Padding 的缩写&#xff0c;是一种解决跨域数据获取的方案。由于浏览器的同源策略限制&#xff0c;不同域名之间的前端JS代码不能相互访问到对方的数据&#xff0c;JSONP通过script标签的特性&#xff0c;实现在不同域名的网页间传递数据。 其原理是…...

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

边缘计算医疗风险自查APP开发方案

核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

.Net Framework 4/C# 关键字(非常用,持续更新...)

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...