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

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.lryc.cn/news/261126.html

相关文章:

  • 【ArcGIS Pro微课1000例】0055:Pro中如何处理个人数据库(.mdb)
  • 【Spark精讲】Spark五种JOIN策略
  • linux 常用脚本搜集(nginx) —— 筑梦之路
  • 基于PCIe的NVMe学习
  • 循环神经网络-1
  • MFC画折线图,基于x64系统
  • JDK8安装教程分享
  • CentOS 7 部署 dnsmasq
  • DBA面试题
  • 源码解析:Apache RocketMQ重置消费位点
  • Python 自动化之处理docx文件(一)
  • Vue mixins详解
  • ssl证书问题导致本地启动前端服务报500
  • Rust 学习
  • 1.1 【应用开发】应用开发简介
  • 在windows系统搭建LVGL模拟器(codeblock工程)
  • 2023第十四届蓝桥杯国赛 C/C++ 大学 B 组
  • 如何在页面中加入百度地图
  • Windows VC++提升当前进程权限到管理员权限
  • 算法leetcode|92. 反转链表 II(rust重拳出击)
  • Chapter 7 - 3. Congestion Management in Ethernet Storage Networks以太网存储网络的拥塞管理
  • 优雅玩转实验室服务器(二)传输文件
  • 动态面板简介以及ERP原型图案列
  • 漏刻有时百度地图API实战开发(12)(切片工具的使用、添加自定义图层TileLayer)
  • python 爬虫 m3u8 视频文件 加密解密 整合mp4
  • mybatis中xml文件容易搞混的属性
  • android Retrofit2.0请求 延长超时操作
  • Axure之动态面板轮播图
  • 一文读懂算法中的时间复杂度和空间复杂度,O(1)、O(logn)、O(n)、O(n^2)、O(2^n) 附举例说明,常见的时间复杂度,空间复杂度
  • LWIP热插拔功能实现