typescript映射类型

ts映射类型简介

TypeScript中的映射类型(Mapped Type)是一种高级类型,它允许我们基于现有类型创建新的类型,同时对新类型的每个属性应用一个转换函数。通过使用映射类型,我们可以方便地对对象的属性进行批量操作,例如将所有属性的类型转换为另一种类型,或者为所有属性添加额外的修饰符。

ts类型映射

类型映射:基于旧类型创建新类型(对象类型).减少重复,提升开发效率

比如,类型ClassKey有x/y/z
另一类型myClass中也有x/y/z,并且MyClass中xyz类型相同
如下示例

在这里插入图片描述

根据类型别名创建映射类型

这样写没什么大问题,但是x/y/z重复写了两次,是冗余代码,像这种情况,就可以使用映射类型,来进行简化
示例如下
在这里插入图片描述
tips:

  • 映射类型是基于索引签名类型的,所以该语法类似于索引签名,也是用了[]符号
  • key in ClassKey 表示key可以是PropKeys类型别名中的任意一个,类似于forin(let k in obj)
  • 使用映射类型创建的新对象类型MyClass 和MyClassNew结构完全相同
  • 映射类型只能在类型别名中使用,不能在接口中使用

使用映射类型创建的新对象类型MyClass 和MyClassNew结构完全相同
示例如下

在这里插入图片描述

根据对象类型创建映射类型

映射类型出来根据联合类型创建新类型外,还可以根据对象类型来创建
在这里插入图片描述
这段代码首先定义了两个类型别名 MyClass 和 MyClassNew,其中 MyClass 是一个对象类型,具有三个属性 a、b 和 c,它们的类型分别是 number、string 和 boolean。而 MyClassNew 是一个映射类型,基于 MyClass 中的每个属性键创建一个新的属性,属性值为 number | string | boolean 类型。

接着创建了两个变量 myClass 和 myClassNew,并分别指定它们的类型为 MyClass 和 MyClassNew。然后初始化了这两个变量的值,都为 { a: 1, b: “2”, c: true }。由于这个值符合 MyClass 和 MyClassNew 的定义,所以可以将它赋值给这两个变量。

这段代码演示了如何使用类型别名和映射类型来定义和使用对象类型,以及如何创建符合这些类型的变量。通过使用映射类型,我们可以更方便地操作对象的属性类型,例如将对象的所有属性转换为另一种类型、为对象的所有属性添加默认值等等。

tips:

  1. 首先,先执行keyof MyClass获取到对象类型MyClass中所有键的联合类型即; ‘a’|‘b’|‘c’
  2. 然后key in 就表示key可以说MyClass中所有键名称中的任意一个

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

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

相关文章

[TCP] TCP/IP 基础知识词典(2)

我想统计一下,TCP/IP 尤其是TCP协议,能搜到的常见的问题,整理起来,关键词添加在目录中,便于以后查阅。 目前预计整理共3篇: [TCP] TCP/IP 基础知识问答 :基础知识 [TCP] TCP/IP 基础知识问答&…

【论文精读】IBOT

摘要 掩码语言建模(MLM)是一种流行的语言模型预训练范式,在nlp领域取得了巨大的成功。然而,它对视觉Transformer (ViT)的潜力尚未得到充分开发。为在视觉领域延续MLM的成功,故而探索掩码图像建模(MIM),以训练更好的视觉transforme…

VSCode将某个字符替换为换行符并换行显示

不想每次去查了,我自己写博客记录一下~~~ 我的需求是一个一行的数据,用逗号分开,我希望竖着看有规律点,类似这样 快捷键其实想 optioncommandf ,但是我每次都记不住,大家可以直接在编辑栏找到replace的地方…

HTML好玩代码合集(1)

VIP代码合集🧧,这一期是场景式HTML代码,里面的文字也是可以修改的,不知道怎么修改可以私信我。 效果(玩个梗,别在意): 好玩代码: <!DOCTYPE html> <html> {#jishugang#}<head><meta charset="utf-8" /><title>怎么堵船了�…

个人博客搭建

使用彩虹云主机百度云域名WordPress 下载WordPress https://cn.wordpress.org/ 购买主机 购买彩虹云主机&#xff0c;购买香港高防主机https://www.cccyun.net/ 购买之后点击 管理 进入后点 击前往控制面板 -> 一键登录控制面板 可进入控制面板。 选择文件管理 在线…

为全志D1开发板移植LVGL日历控件和显示天气

利用TCP封装HTTP包请求天气信息 Linux还真是逐步熟悉中&#xff0c;现在才了解到Linux即没有原生的GUI&#xff0c;也没有应用层协议栈&#xff0c;所以要实现HTTP应用&#xff0c;必须利用TCP然后自己封装HTTP数据包。本篇即记录封装HTTP数据包&#xff0c;到心知天气请求天气…

API网关-Apisix路由配置教程

文章目录 前言一、简介1. 路由简介2. 路由配置方式 二、路由配置&#xff08;手动填写上游方式&#xff09;1. 路由请求转发配置1.1 设置路由信息1.2 设置上游服务1.3 插件配置1.4 测试1.5 查看配置数据1.7 数据编辑器配置 2. 路由请求转发并添加路径前缀2.1 在数据编辑器输入y…

(3)llvm ir转换过程

&#xff08;1&#xff09;DAG Lowering 输入的IR转换成SelectionDAG的过程被称作lowering 就是把llvm ir转成这种 &#xff08;2&#xff09;DAG legalization "DAG legalization"&#xff08;有向无环图合法化&#xff09;是编译器后端&#xff0c;特别是在LLVM中…

施华洛世奇 Swarovski EDI需求分析

施华洛世奇为全球首屈一指的光学器材及精确切割仿水晶制造商&#xff0c;为时尚服饰、首饰、灯饰、建筑及室内设计提供仿水晶元素。施华洛世奇有两个主要业务&#xff0c;分别负责制造及销售仿水晶元素&#xff0c;以及设计制造成品。 EDI传输协议 施华洛世奇 Swarovski 与合作…

虚拟机的内存结构

一、摘要 熟悉 Java 语言特性的同学都知道&#xff0c;相比 C、C 等编程语言&#xff0c;Java 无需通过手动方式回收内存&#xff0c;内存中所有的对象都可以交给 Java 虚拟机来帮助自动回收&#xff1b;而像 C、C 等编程语言&#xff0c;需要开发者通过代码手动释放内存资源&…

SQL 练习题目(入门级)

今天发现了一个练习SQL的网站--牛客网。里面题目挺多的&#xff0c;按照入门、简单、中等、困难进行了分类&#xff0c;可以直接在线输入SQL语句验证是否正确&#xff0c;并且提供了测试表的创建语句&#xff0c;也可以方便自己拓展练习&#xff0c;感觉还是很不错的一个网站&a…

时域相位分析技术 和空域相位分析技术

l) 时域相位分析技术 在光 学测量 的许 多情况 下 &#xff0c; 时变图像信 号 的背景光 强 与调制 度可 以看作是 常 数 &#xff0c;并且 其光 强 随时 间 的变化也满足 正 弦条件 。 那 么针 对某 一 空 间采样 点 (x &#xff0c;y) &#xff0c; 某时刻 采 集到 的光 强 可…