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.hqwc.cn/news/276594.html

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

相关文章

从生态的角度看容器和虚拟化的区别

「执笔人」品高股份 cloud native 资深架构师&#xff1a;继承 概述 容器技术和虚拟机技术都是近些年计算平台的主要的计算虚拟化技术&#xff0c;各家云厂商都提供虚拟机和容器服务&#xff0c;关于容器和虚拟化的区别&#xff0c;业界已经有很多共识了&#xff0c;例如&…

WWW 指南-万维网联盟(World Wide Web)

WWW - 万维网联盟 WWW通常称为网络。 web是一个世界各地的计算机网络。 电脑在Web上使用标准语言沟通。 万维网联盟&#xff08;W3C&#xff09;制定了Web标准 什么是WWW&#xff1f; WWW 代表 World Wide Web(万维网)万维网常常被称为 网络网络是世界各地的计算机网络网络中…

Python语言学习笔记之十一(DotEnv)

本课程对于有其它语言基础的开发人员可以参考和学习&#xff0c;同时也是记录下来&#xff0c;为个人学习使用&#xff0c;文档中有此不当之处&#xff0c;请谅解。 1、认识Python DotEnv dotenv是Python中的一个工具包&#xff0c;它主要用于谈取项目中的.env文件&#xff0…

java导出excel通用工具(POI,类注解形式)

通过给类定义注解(设置名称&#xff0c;设置kv转换值)&#xff0c;然后利用设置的名称和传入的数据进行导出。 只需要在项目添加两个工具类就可以实现excel导出功能。 1、单sheet 步骤&#xff1a;1、根据业务需求定义导出的类&#xff0c;并设置表头名称。 …

系列三、DDL

一、DDL 1.1、概述 DDL是英文单词Data Definition Language的缩写&#xff0c;中文意思为数据定义语言&#xff0c;是用来定义数据库对象(数据库&#xff0c;表&#xff0c;字段)的。 1.2、数据库操作 1.2.1、查询所有数据库 show databases; 1.2.2、创建数据库 # 语法 cre…

Vue学习计划-Vue2--VueCLi(五)全局事件总线、消息订阅与发布(pubsub)

抛出问题:我们多级组件&#xff0c;或者任意不想关的子组件如何传递数据呢&#xff1f; 1. 全局事件总线&#xff08;$bus&#xff09; 一种组件间通信的方式&#xff0c;适用于任意组件间通信 全局事件总线示意图&#xff1a; 安装全局事件总线&#xff1a; new Vue({..…

FM30H12G N通道沟槽电源MOS管 封装形式PDFN5*6

FM30H12G 是一款 N通道沟槽电源的场效应管&#xff08;MOS管&#xff09;&#xff0c;封装形式&#xff1a;PDFN5*6。 来百度APP畅享高清图片 FM30H12G应用&#xff1a; 1、液晶电视 2、笔记本 3、电梯 4、感应加热 5、电动工具

CMD命令行如何快速定位到指定路径

我们在工作过程中&#xff0c;经常需要在控制台输入一些命令行&#xff0c;有些情况下需要在指定的路径下执行某些命令行&#xff0c;这就需要在cmd中定位到指定路径&#xff0c;下面介绍 CMD快速定位到当前路径的两种方法。 1.手动定位法 首先&#xff0c;我们要定位到D:\Work…

商业印刷市场分析:预计2029年将达到53004亿元

商业印刷技术显示了强大的生命力。电子商务的扩张性发展&#xff0c;传统的商务印刷行业也在逐渐的转型。中国印刷业已深度融入全球印刷加工产业链&#xff0c;为国际社会超过50个国家提供印刷包装服务。数据显示&#xff0c;中国印刷业对外加工贸易额已达842亿元。 商业印刷是…

关于 Redis 与传统关系型数据库的选择

当需要为你的应用程序选择合适的数据库时&#xff0c;选择何种数据库通常取决于你项目的特定要求。Redis 是一种高性能的内存数据存储&#xff0c;而 MySQL 等传统关系型数据库也各自具有自己的优势和劣势。在本期文章中&#xff0c;我们将探讨在 Redis 和传统关系型数据库之间…

圈子社交文化系统,了解生活,更了解你!APP小程序H5三端源码交付,支持二开!

在这个快节奏的时代&#xff0c;圈子社交系统成为了我生活中不可或缺的一部分。通过这个系统&#xff0c;我不仅可以结识到志同道合的朋友&#xff0c;还可以参与各种有趣的活动和发布自己的心情和见解。在这个圈子里&#xff0c;我感受到了无限的可能性和温暖的人性。 首先&am…

深度探索Linux操作系统 —— Linux图形原理探讨

系列文章目录 深度探索Linux操作系统 —— 编译过程分析 深度探索Linux操作系统 —— 构建工具链 深度探索Linux操作系统 —— 构建内核 深度探索Linux操作系统 —— 构建initramfs 深度探索Linux操作系统 —— 从内核空间到用户空间 深度探索Linux操作系统 —— 构建根文件系统…