Typescript中Omit数据类型的理解

news2024/11/27 6:17:43

在 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.coloradmin.cn/o/1318763.html

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

相关文章

Leetcode刷题笔记题解(C++):224. 基本计算器

思路&#xff1a; step 1&#xff1a;使用栈辅助处理优先级&#xff0c;默认符号为加号。 step 2&#xff1a;遍历字符串&#xff0c;遇到数字&#xff0c;则将连续的数字字符部分转化为int型数字。 step 3&#xff1a;遇到左括号&#xff0c;则将括号后的部分送入递归&#x…

面向对象三大特征——继承

目录 1. 概述 2. 继承的限制 2.1 单继承 2.2 访问修饰符 2.3 . final 3. 重写 4. super 4.1super的作用 4.2访问父类的成员和被重写方法 4.3调用父类的构造器 1. 概述 多个类中存在相同属性和行为时&#xff0c;将这些内容抽取到单独一个类中&#xff0c;那么就无需在…

DeciLM-7B:突破极限,高效率、高精准度的70亿参数AI模型

引言 在人工智能领域&#xff0c;语言模型的发展速度令人瞩目。Deci团队最近推出了一款具有革命性意义的语言模型——DeciLM-7B。这款模型在速度和精确度上都实现了显著的突破&#xff0c;以其70亿参数的规模&#xff0c;在语言模型的竞争中脱颖而出。 Huggingface模型下载&am…

C# 基本桌面编程(二)

一、前言 本章为C# 基本桌面编程技术的第二节也是最后一节。前一节在下面这个链接 C# 基本桌面编程&#xff08;一&#xff09;https://blog.csdn.net/qq_71897293/article/details/135024535?spm1001.2014.3001.5502 二、控件布局 1 叠放顺序 在WPF当中布局&#xff0c;通…

我与Datawhale的故事之长篇

Datawhale成员 作者&#xff1a;Datawhale团队成员 前 言 上周五周年文章发出后大家反响比较热烈&#xff1a; 我们与Datawhale背后的故事&#xff01; 本期给大家带来三篇长篇回忆 胡锐峰 我与Datawhale的故事 题记&#xff1a;我和你的相遇就像春风拂面&#xff0c;就像夏雨…

[原创][R语言]股票分析实战[2]:周级别涨幅趋势的相关性

[简介] 常用网名: 猪头三 出生日期: 1981.XX.XX QQ联系: 643439947 个人网站: 80x86汇编小站 https://www.x86asm.org 编程生涯: 2001年~至今[共22年] 职业生涯: 20年 开发语言: C/C、80x86ASM、PHP、Perl、Objective-C、Object Pascal、C#、Python 开发工具: Visual Studio、D…

UE5 C++(三)— 基本用法(生命周期、日志、基础变量)

文章目录 生命周期日志打印Outlog打印屏幕打印 基础变量类型FString、FName 和 FText&#xff0c;三者之间的区别 基础数据类型打印 忘记说了每次在Vscode修改后C脚本后&#xff0c;需要编译一下脚本&#xff0c;为了方便我是点击这里编译脚本 生命周期 Actor 生命周期官方文档…

20--Set集合

1、Set集合 1.1 Set集合概述 java.util.Set接口和java.util.List接口一样&#xff0c;同样继承自Collection接口&#xff0c;它与Collection接口中的方法基本一致&#xff0c;并没有对Collection接口进行功能上的扩充&#xff0c;只是比Collection接口更加严格了。与List接口…

wordpress安装之正式开始安装wordpress

1、拉取wordpress镜像 docker pull wordpress 2、启动容器 启动容器&#xff0c;设置容器名为wordpress2并把80端口映射到宿主机的9988端口 docker run -it --name wordpress2 -p 9988:80 -d wordpress 3、查看容器状态 docker ps 4、安装wordpress博客程序 因为我们前面启…

SLAM算法与工程实践——相机篇:传统相机使用(3)

SLAM算法与工程实践系列文章 下面是SLAM算法与工程实践系列文章的总链接&#xff0c;本人发表这个系列的文章链接均收录于此 SLAM算法与工程实践系列文章链接 下面是专栏地址&#xff1a; SLAM算法与工程实践系列专栏 文章目录 SLAM算法与工程实践系列文章SLAM算法与工程实践…

关于找不到XINPUT1_3.dll,无法继续执行代码问题的5种不同解决方法

一、xinput1_3.dll的作用 xinput1_3.dll是Windows操作系统中的一款动态链接库文件&#xff0c;主要用于支持游戏手柄和游戏输入设备。这款文件属于Microsoft Xbox 360兼容性库&#xff0c;它包含了与游戏手柄和其他输入设备相关的功能。在游戏中&#xff0c;xinput1_3.dll负责…

计算机操作系统-第十八天

目录 进程调度时机 补充知识 进程调度的方式 非剥夺调度方式 剥夺调度方式 进程的切换与过程 本节思维导图 进程调度时机 进程调度&#xff08;低级调度&#xff09;&#xff0c;即按照某种算法从就绪队列中选择一个进程为其分配处理机。 共有两种需要进行进程调度与…

CCNP课程实验-OSPF-CFG

目录 实验条件网络拓朴需求 配置实现基础配置1. 配置所有设备的IP地址 实现目标1. 要求按照下列标准配置一个OSPF网络。 路由协议采用OSPF&#xff0c;进程ID为89 &#xff0c;RID为loopback0地址。3. R4/R5/R6相连的三个站点链路OSPF网络类型配置成广播型&#xff0c;其中R5路…

PMP项目管理 - 资源管理

系列文章目录 PMP项目管理 - 质量管理 PMP项目管理 - 采购管理 PMP项目管理 - 资源管理 PMP项目管理 - 风险管理 现在的一切都是为将来的梦想编织翅膀&#xff0c;让梦想在现实中展翅高飞。 Now everything is for the future of dream weaving wings, let the dream fly in…

DISC-MedLLM—中文医疗健康助手

文章目录 DISC-MedLLM 项目介绍数据集构建重构AI医患对话知识图谱生成问答对医学图谱构建图谱生成QA对 人类偏好引导的对话样例其他数据MedMCQA通用数据 模型微调评估评估方式评估结果 总结 DISC-MedLLM 项目介绍 DISC-MedLLM 是一个专门针对医疗健康对话式场景而设计的医疗领…

「斗破年番」小医仙黑皇城遭调戏,五品丹换药材,获取菩提涎消息

Hello,小伙伴们&#xff0c;我是拾荒君。 《斗破苍穹年番》的第75集已经更新了&#xff0c;喜欢这部国漫的小伙伴应该都去观看了吧&#xff0c;拾荒君也是看了看这一集。在这一集中&#xff0c;萧炎成功地帮助吴昊等人摆脱了鹰爪老人的围困&#xff0c;然后便前往了黑皇城。 黑…

openGauss学习笔记-163 openGauss 数据库运维-备份与恢复-导入数据-使用COPY FROM STDIN导入数据-简介

文章目录 openGauss学习笔记-163 openGauss 数据库运维-备份与恢复-导入数据-使用COPY FROM STDIN导入数据-简介163.1 关于COPY FROM STDIN导入数据163.2 CopyManager类简介163.2.1 CopyManager的继承关系163.2.2 构造方法163.2.3 常用方法 openGauss学习笔记-163 openGauss 数…

torch中张量与数据类型的介绍

PyTorch张量的定义介绍 PyTorch最基本的操作对象是张量&#xff0c;它表示一个多维数组&#xff0c;类似NumPy的数组&#xff0c;但是前者可以在GPU上加速计算 初始化张量 ttorch.tensor([1,2]) # 创建一个张量 print(t) t.dtype #打印t的数据类型为torch.int…

Vue 指定class区域增加水印显示(人员姓名+时间)

效果 代码&#xff0c;存放位置 /utils/waterMark.js //waterMark.js文件let waterMark {}let setWaterMark (str,str1) > {let id 1.23452384164.123412416;if (document.getElementById(id) ! null) {//ui-table是table上的一个样式&#xff0c;一般水印显示在这个tab…

visual stdio code运行js没有输出

visual code运行js没有输出 先Debug file 然后右键直接run code就会输出了 插件的安装 visual stdio code插件安装 c qt wordle游戏实现