Typescript中Omit数据类型的理解

在 TypeScript 中,Omit 是一个内置的工具类型,它用于从对象类型中排除指定的属性,并返回剩余的属性。

Omit 的语法如下所示:

type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;

其中,T 表示原始类型,K 表示要排除的属性键的联合类型。

使用 Omit 类型时,我们可以指定要从原始类型中排除的属性,然后得到一个新的类型,该类型不包含指定的属性。

在实际开发中,我们如何去使用

interface User {id:number,username:string,password:string,email:string
}// 使用Omit从User类型中排除"password"和"email"字段,创建PublicUserInfo类型
type PublicUserInfo = Omit<User,"password" | "email">;const mockUser = {id:1,username:'jack',email:'jack@163.com',password:"hashed_password"
}// 登录函数,验证用户名和密码是否匹配,若匹配则返回PublicUserInfo类型,否则返回null
function login(username:string,password:string): PublicUserInfo | null {if(username === mockUser.username && password === mockUser.password){return {id:mockUser.id,username:mockUser.username};}else{return null;}
}// 用户个人资料组件,接收一个PublicUserInfo类型的user作为参数
function UserProfile({ user } : { user: PublicUserInfo }){return (<div><h1>User Profile</h1><p>id:{user.id}</p><p>username:{user.username}</p></div>)
}const App = () => {// 模拟用户登录const loggedUser = login("jack","hashed_password")return (<div><h1>在react中应用TS中omit类型</h1>{ loggedUser ? <UserProfile user={loggedUser} /> : (<p>Login file</p>) }</div>)
}export default App;

得出的效果如下: 

这段代码演示了在React中如何应用TS中的Omit类型。首先,我们定义了一个user接口,包含id.username、password和email字段。然后,使用0mit类型从User类型中排除了password和email字段,创建了PublicUserInfo类型。
接下来,我们使用mockUser对象模拟一个用户信息,包括id、username、email和password字段在login函数中,我们验证输入的用户名和密码是否与模拟用户的信息匹配。如果匹配,则返回个包含id和username字段的PublicUserInfo对象;否则,返回nu11。
UserProfile组件接收一个user参数,类型为PublicUserInfo,并展示用户的个人资料最后,在App组件中模拟用户登录,并根据登录状态渲染不同的内容

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

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

相关文章

D3D12可编程渲染流水线

一、初始化D3D库 启用 DirectX数学库 x86需要启用SSE2指令集&#xff0c;所有平台均需将浮点模型设置为fast。默认为&#xff1a; 精度 (/fp:precise)。 #include <DirectXMath.h> #include <DirectXPackedVector.h> 启用调试模式下的内存泄漏检测 // Enabl…

CCF-CSP真题《202309-5 阻击》思路+ c++满分题解

想查看其他题的真题及题解的同学可以前往查看&#xff1a;CCF-CSP真题附题解大全 试题编号&#xff1a;202309-5试题名称&#xff1a;阻击时间限制&#xff1a;2.0s内存限制&#xff1a;512.0MB问题描述&#xff1a; 问题描述 上回提到&#xff0c;西西艾弗岛下方有一个庞大的遗…

【面试】广告优化

a1&#xff1a;点击率公式是什么&#xff1f;点击率低的原因是什么&#xff1f; 点击率点击/曝光&#xff0c;点击率低的原因主要有两点&#xff1a;一是创意不吸引人&#xff1b;二是目标受众不准确/定向过宽不精确&#xff0c;广告曝光给了对产品不感兴趣用户 a2&#xff1a;…

mysql学习记录

insert into table_nameA(字段名) select 字段名 from table_nameA&#xff08;按照一般的select语句格式进行&#xff09; 通过此语句&#xff0c;可以根据需要抓取数据组成新记录落表 存储过程&#xff1a; 创建&#xff1a; CREATE PROCEDURE pro_name&#xff08; IN o…

mysql !=索引为什么失效

可以先看这个&#xff1a;Mysql查询条件为大于时&#xff0c;不走索引失效场景-CSDN博客 如下建立了联合索引&#xff0c; 注意查询phone是用不对劲了索引&#xff0c;key_len82 改为 !时&#xff0c; key key_len没内容&#xff0c;说明没有走索引&#xff0c;为什么没有走&…

DOS 系统(命令行)

文章目录 DOS 系统DOS 常用命令DOS 高级命令DOS 批处理命令DOS 应用场景 DOS 系统 操作系统的发展史&#xff08;DOS/Windows篇&#xff09; DOS操作系统的历史 DOS&#xff08;Disk Operating System&#xff09; 是 磁盘操作系统 的缩写&#xff0c;是一种早期的个人计算机操…

HashMap构造函数解析与应用场景

目录 1. HashMap简介 2. HashMap的构造函数 2.1 默认构造函数 2.2 指定初始容量和加载因子的构造函数 3. 构造函数参数的影响 3.1 初始容量的选择 3.2 加载因子的选择 4. 构造函数的应用场景 4.1 默认构造函数的应用场景 4.2 指定初始容量和加载因子的构造函数的应用…

10天玩转Python第8天:python 文件和异常 全面详解与代码示例

今日内容 文件操作 普通文件的操作json 文件的操作[重点] 异常处理(程序代码运行时的报错) 文件介绍 计算机的 文件&#xff0c;就是存储在某种 长期储存设备 上的一段 数据 作用: 将数据长期保存下来&#xff0c;在需要的时候使用 ​ 1.计算机只认识 二进制(0 1) 2.文件中…

myBatis-plus自动填充插件

在 MyBatis-Plus 3.x 中&#xff0c;自动填充的插件方式发生了变化。现在推荐使用 MetaObjectHandler 接口的实现类来定义字段的填充逻辑。以下是使用 MyBatis-Plus 3.x 自动填充的基本步骤&#xff1a; 1.基本配置 1.1添加 Maven 依赖&#xff1a; 确保你的 Maven 依赖中使…

10天玩转Python第9天:python 面向对象 全面详解与代码示例

今日内容 异常 模块和包 导入模块(导包)if __name__ "__main__": Unitest 框架的学习 了解, 基本组成 异常 异常传递[了解] 异常传递是 Python 中已经实现好了,我们不需要操作, 我们知道异常会进行传递. ​ 异常传递: 在函数嵌套调用的过程中, 被调用的函数 ,发…

Grafana Loki 快速尝鲜

Grafana Loki 是一个支持水平扩展、高可用的聚合日志系统&#xff0c;跟其他的聚合日志系统不同&#xff0c;Loki只对日志的元数据-标签进行索引&#xff0c;日志数据会被压缩并存储在对象存储中&#xff0c;甚至可以存储在本地文件系统中&#xff0c;能够有效降低成本&#xf…

下午好~ 我的论文【遥感】(第一期)

写在前面&#xff1a;下午浑浑噩噩&#xff0c;泡杯茶&#xff0c;读篇论文吧 首先说明&#xff0c;时间有限没有那么精力一一回复了&#xff0c;对不起各位了TAT 文章目录 遥感Bi-Dilation-formerCNN-GNN-FusionMulti-hierarchical cross transformerCoupled CNNs 遥感 Bi-D…

电路中的屏蔽罩作用及设计

1.1 屏蔽罩作用 1.1.1 屏蔽电子信号,防止外界的干扰或内部向外的辐射&#xff1a; 一般见于通信类电路PCB&#xff0c;主要一个无线通信产品上有的敏感器件、模拟、数字电路、DCDC电源电路&#xff0c;都需屏蔽隔离&#xff0c;是为了不影响其它电路&#xff0c;也有防止其它电…

国际刑警组织推出新的生物识别系统

2023 年 11 月 29 日&#xff0c;国际刑警组织发布了一份有关创建生物识别工具的新闻稿&#xff0c;至少在意大利&#xff0c;该工具似乎已经陷入沉默&#xff0c;但让我们看看为什么我们会对这个东西感兴趣。 国际刑警组织的新闻稿用了整整一段时间来讨论与隐私相关的问题&am…

0x31 质数

0x31 质数 定义&#xff1a; 若一个正整数无法被除了1和它自身之外的任何自然数整除&#xff0c;则称该数为质数&#xff08;或素数&#xff09;&#xff0c;否则则称该正整数为合数。 在整个自然数集合中&#xff0c;质数的数量不多&#xff0c;分布比较稀疏&#xff0c;对…

动态规划——OJ题(一)

&#x1f4d8;北尘_&#xff1a;个人主页 &#x1f30e;个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上&#xff0c;不忘来时的初心 文章目录 一、第N个泰波那契数1、题目讲解2、思路讲解3、代码实现 二、三步问题1、题目讲解2、思路讲解…

拖拽属性 draggable

H5 新增的属性 draggable&#xff0c;它能够给与一切的 html 元素拖动的效果。 拖拽元素 属性为 draggable"true" 的元素&#xff0c;可拖动&#xff0c;且拖动时鼠标变为禁用图标 ps: 直接写 draggable 可能无效 ondragstart 开始拖拽时触发&#xff08;按下鼠标…

ARM架构简析

全局与局量等知识 断电后&#xff0c;程序以及数据都在FLASH中。 断电后&#xff0c;内存中就没有变量了。 程序在烧在FLASH中的&#xff1b; 程序运行的时候&#xff0c;全局变量的初始值&#xff0c;必然是从FLAASH中的来的&#xff1a; 初始化全局变量的过程&#xff1a;…

pytorch和pytorchvision安装

参考https://blog.csdn.net/2301_76863102/article/details/129369549 https://blog.csdn.net/weixin_43798572/article/details/123122477 查看我的版本 右键&#xff0c;nvivdia控制面板&#xff0c;帮助&#xff0c;系统信息 驱动程序版本号为528.49 更新很快的 CUDA版本…

cpp:1:10: fatal error: opencv2/core.hpp: 没有那个文件或目录

前言&#xff1a; 我按照官网方法安装了opencv&#xff0c;运行的也是官网的测试代码&#xff1a; #include <opencv2/core.hpp> #include <opencv2/highgui.hpp> using namespace cv; int main() {printf("hello world")return 0; } 半解决&#xff…