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.mzph.cn/news/694456.shtml

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

相关文章

typescript 索引签名类型

ts索引类型简介 在TypeScript中,索引签名类型(Index Signature Type)是一种特殊的类型,它定义了对象中键的类型以及相应的值的类型。通过使用索引签名类型,我们可以表示一个对象,该对象的键可以是任意类型…

python3 flask 实现对config.yaml文件的内容的增删改查,并重启服务

config.yaml配置文件内容 功能就是userpass下的用户名和密码做增删改查,并重启hy2服务 auth:type: userpassuserpass:csdn: csdnlisten: :443 masquerade:proxy:rewriteHost: trueurl: https://www.bing.com/type: proxy tls:cert: /root/hyst*****马赛克******er…

【算法2-1】前缀和、差分与离散化

一、【P3406】海底高铁(差分贪心)​​​​​​ 由于本题涉及到线路问题,需要统计Uim途径每条线路的次数,而且Uim每次的轨迹都是很长一段路径,所以需要使用一个合理的数据结构来维护区间的变化,首先想到线段…

正交匹配追踪算法(Orthogonal Matching Pursuit)实现过程及Python模拟

正交匹配追踪(Orthogonal Matching Pursuit,OMP)是一种用于寻找稀疏信号的贪婪算法,用于求解压缩感知问题中的稀疏近似问题。在压缩感知的背景下,通常我们有一个欠定的线性系统Ax y,其中A是一个已知的测量…

信奥一本通:2022:【例4.7】最小n值

这个题目的难点在于他让你输入1 2 3&#xff0c;不等的数&#xff0c;意思就是你不知道循环要执行几次&#xff0c;用户输入几次就是几次&#xff0c;那就只有这样写 while (cin >> num) #include <iostream> # include <iomanip> using namespace std;…

第三百五十九回

文章目录 1. 概念介绍2. 使用方法3. 代码与效果3.1 示例代码3.2 运行效果 4. 内容总结 013pickers2.gif 我们在上一章回中介绍了"如何实现Numberpicker"相关的内容&#xff0c;本章回中将介绍wheelChoose组件.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念…

学习鸿蒙基础(4)

1.条件渲染 ArkTS提供了渲染控制的能力。条件渲染可根据应用的不同状态&#xff0c;使用if、else和else if渲染对应状态下的UI内容。 当if、else if后跟随的状态判断中使用的状态变量值变化时&#xff0c;条件渲染语句会进行更新。。 Entry Component struct PageIfElse {Stat…

【C++杂货铺】模板

&#x1f308;前言&#x1f308; 欢迎观看本期【C杂货铺】&#xff0c;本期内容将讲解模板的初阶&#xff0c;即了解模板&#xff0c;熟练掌握模板的使用方法&#xff0c;了解模板的工作原理等内容。 &#x1f4c1; 函数模板 &#x1f4c2; 概念 函数模板代表了一个函数家族&am…

如何在Windows系统中检测和结束运行中的程序(任务管理器显示运行程序可能有bug)

如何在Windows系统中检测和结束运行中的程序 在Windows系统的日常使用和管理过程中&#xff0c;我们经常需要检测某个程序是否正在运行&#xff0c;并在必要时结束它。本文将详细介绍如何在Windows系统中检测运行中的程序&#xff0c;并提供多种方法来结束这些程序。 检测运行…

通俗易懂的双亲委派机制

当你超过别人一点点&#xff0c;别人会嫉妒你&#xff1b;当你超过别人一大截&#xff0c;别人就会羡慕你 据说给我点关注的都成了大佬&#xff0c;点关注的我都会私发一份好东西 ​​​​你得先知道 在介绍双亲委派机制的时候&#xff0c;不得不提ClassLoader&#xff08;类…

Java字符串转整数的超简单方法!

推荐阅读 智能化校园&#xff1a;深入探讨云端管理系统设计与实现&#xff08;一&#xff09; 智能化校园&#xff1a;深入探讨云端管理系统设计与实现&#xff08;二&#xff09; 问题描述 当你把一个字符串值和一个整数加在一起而不进行任何形式的转换时会发生什么呢&#…

聚合支付,聚合系统,聚合程序或将成为主流

支付市场的变化对用户、代理商和运营商产生了重大影响。 随着政策监管的日益严格&#xff0c;支付行业逐渐朝着标准化和合理化的方向发展&#xff0c;日益增强其安全性。在这个背景下&#xff0c;聚合平台已经成为未来支付行业发展的重要趋势。特别是在“一机一码”政策实施后&…

前端进度条组件NProgress

nprogress 安装 npm install --save nprogress使用 import NProgress from nprogress // 引入nprogress插件 import nprogress/nprogress.css // 这个nprogress样式必须引入// axios请求拦截器 axios.interceptors.request.use(config > {NProgress.start() // 设置加载进…

【学习心得】编程小白该如何学好C语言(✨新手推荐阅读)

前言 对于刚刚踏入编程领域的小白来说&#xff0c;C语言可能是一个既神秘又充满挑战的领域。但只要你掌握了正确的学习方法&#xff0c;C语言的学习之旅也可以是充满乐趣和成就感的。 一、明确学习目标 对于初学者来说&#xff0c;明确学习目标是学好C语言的第一步。一个清晰…

BIG DATA —— 大数据时代

大数据时代 [英] 维克托 迈尔 — 舍恩伯格 肯尼斯 库克耶 ◎ 著 盛杨燕 周涛◎译 《大数据时代》是国外大数据研究的先河之作&#xff0c;本书作者维克托迈尔舍恩伯格被誉为“大数据商业应用第一人”&#xff0c;他在书中前瞻性地指出&#xff0c;大数据带来的信息…

扩散模型+轨迹预测

目录 1. 基础知识2. 轨迹预测相关2.1 Leapfrog Diffusion Model2.2 MID2.3 中科院2.4 DICE2.5 MotionDiffuser2.6 DiffTraj 3. 练手时可参考4. 扩展&#xff1a;扩散模型RL 1. 基础知识 Stable diffusion扩散模型相关 Diffusion相关二 Diffusers是hugging face发起的用于专门…

Vue3引用第三方模块报错Could not find a declaration file for module ***.

在引用第三方的组件时候报错如下 原因是&#xff1a;该组件可能不是.ts文件而是.js文件 解决方案&#xff1a; 1.在Src的目录下面新建一个文件为shims-vue.d.ts的文件 2.文件内容为 declare module xxx&#xff0c;xxx就是你报错的模块 例如我这样 declare module vue3-pu…

单片机03--按键--寄存器版

GPIO端口相关寄存器&#xff08;STM32F40x芯片&#xff09; 目标&#xff1a; 开关KEY1控制开灯。 分析&#xff1a; KEY1---PA0--->输入---->浮空输入/下拉输入 KEY1不导通时&#xff0c;PA0输入为低电平&#xff0c;KEY1导通时&#xff0c;PA0输入为高电平。 实现…

Vue中 Runtime-Only和Runtime + Compiler的区别

在 Vue 项目中&#xff0c;Runtime-Only 和 Runtime Compiler 是两种不同的构建方式。 Runtime-Only&#xff08;仅运行时&#xff09;&#xff1a;在 Runtime-Only 构建中&#xff0c;Vue 库只包含运行时的代码&#xff0c;不包含模板编译器。。Runtime Compiler&#xff08…

Vue3-组合式Api(重点)

阅读文章你可以收获的知识 1.知道setup语法糖的使用和如何实现的 2.知道在vue3中如何定义响应式数据 3.知道在vue3中如何定义一个计算属性&#xff08;computed&#xff09; 4.知道如何在vue3中使用watch来监听数据 5.知道在vue3如何实现父子通信 6.知道vue3如何使用ref函…