Typescript中Partial数据类型在项目中的实际应用

在TypeScript中,Partial是一个内置的泛型类型,用于将给定的类型T 的所有属性转换为可选属性。换句话说,Partial<T> 可以帮助我们将一个类型中的所有属性变为可选属性,这在某些情况下非常有用。

例如:设有一个接口定义如下:

interface User {id:number;username:string,password:string,email:string
}

如果我们想创建一个新的类型,该类型包含 User 的所有属性,但这些属性都是可选的,我们可以使用 Partial<User> 来实现:

type PartialUserInfo = partial<User>

上面的代码将创建一个名为 PartialUserInfo的新类型,该类型包含了 User 的所有属性,但这些属性都变成了可选的。也就是说,PartialUserInfo类型可以表示如下两种形式的对象:

const user1: PartialUserInfo = { id: 1, username: "Alice" }; // 部分属性
const user2: PartialUserInfo = { id: 2, username: "Bob", password: 'zxcvb',email:'123456789@qq.com' }; // 全部属性

在实际开发中,Partial<T> 可以帮助我们处理那些需要动态设置属性的情况,或者在创建对象时不需要提供所有属性的情况。通过将属性设置为可选,可以更灵活地管理类型的定义和对象的初始化。

以上就说Partial数据类型的一些介绍,那么在开发项目中,我们应该如何去使用

定义数据

import {useState} from 'react'// 定义task
type Task = {title:String,completed:boolean
}const App = () => {// 数据定义 在这里我们指定的是Task类型 所以都是属于必填项  所以当我修改的时候,我需要将整体内容进行一个传递,这样使代码的可读性和可维护性不是十分的理想const [tasks,setTasks] = useState<Task[]>([// 设置数据的初始值{ title:"Learn React",completed:false },{ title:"Learn TypeScript",completed:false },{ title:"Learn Vue",completed:true },])return (<div><ul>{tasks.map(task,index) => {return (<li key={index}><inputtype="checkbox"onchang={(e) =>// 传递两个参数,一个下标,一个对象updateTask(index,        {...tasks,completed:e.target.checked})}/>//显示值{ task.title }</li>)}}</ul></div>)
}export default App

在上诉代码中,updateTask并不存在,所以我们要进行定义

const updateTask = (index:number,updatedTask:Task)=>{setTasks(prevTasks => {const newTasks = [...prevTasks];//当修改的时候  也只是修改的这个下标下的整个updateTask对象newTasks[index] = updateTaskreturn newTasks;})
}

此时,我们清晰的一个点就是,我们当前并没有使用Partial这个数据类型的定义

 此时,我们如何使用Partial进行一个更好的代码的一个维护和我们的一个可选属性的一个操作呢?

首先我们需要先将属性进行一个转换:

type PartialTask = Partial<Task>
const updateTask = (index:number,updatedTask:PartialTask)=>{setTasks((prevTasks) => {const newTasks = [...prevTasks];newTasks[index] = {...newTasks[index],...updateTask}return newTasks;})
} 

在属性传输的时候用:

onChange = {(e) => updateTask(index,{completed:e.target.checked})}

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

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

相关文章

2023-12-12 AIGC-AI如何处理信息和提问

摘要: 2023-12-12 AI如何处理信息和提问 AI如何处理信息和提问 对于基于自然语言处理&#xff08;NLP&#xff09;的模型&#xff0c;如ChatGPT这样的大型语言模型。这个过程可以分为几个关键步骤&#xff1a; 1. 接收和解析输入 接收输入&#xff1a;当用户提出一个问题时&…

经典策略筛选-20231212

策略1&#xff1a; 龙头战法只做最强&#xff1a;国企改革 ----四川金顶 1、十日交易内出现 涨停或 &#xff08;涨幅大于7个点且量比大于3&#xff09; 2、JDK MACD RSI OBV BBI LWR MTM 六指标共振 3、均线多头 4、 筹码峰 &#xff08;锁仓&#xff09; 5、现价>…

最强文生图跨模态大模型:Stable Diffusion

文章目录 一、概述二、Stable Diffusion v1 & v22.1 简介2.2 LAION-5B数据集2.3 CLIP条件控制模型2.4 模型训练 三、Stable Diffusion 发展3.1 图形界面3.1.1 Web UI3.1.2 Comfy UI 3.2 微调方法3.1 Lora 3.3 控制模型3.3.1 ControlNet 四、其他文生图模型4.1 DALL-E24.2 I…

Unity光照模型实践

光照作为3D渲染中最重要的部分之一&#xff0c;如何去模拟真实环境的光照是重要的研究内容&#xff0c;但是现实环境光照过于复杂&#xff0c;有很多经典好用的光照模型去近似真实光照。 根据基础的Phong模型 最终某个点的结果为 环境光Ambient 漫反射光Diffuse 高光Specula…

一文讲解关于MCU启动原理的几个关键问题

MCU最开始一启动后去哪里读代码&#xff1f; CPU上电启动后被设计为去地址0x00000000位置处读取代码&#xff1b;首先会连续读取两个字&#xff0c;分别是栈指针初始值和复位异常处理函数的地址&#xff1b;然后跳去执行复位异常处理函数。 当然在一些早期的ARM处理器设计中&a…

在Spring Cloud中使用组件Ribbon和Feign,并分别创建子模块注册到Eureka中去

ok&#xff0c;在上篇文章中我们讲了在Spring cloud中使用Zuul网关&#xff0c;这篇文章我们将Spring Cloud的五大核心组件的Ribbon和Feign分别创建一个微服务模块。 题外话&#xff0c;本篇博客就是配置子模块&#xff0c;或者说是微服务&#xff0c;然后将微服务正式启动之前…

Stimulus—需求形式化建模和验证工具

产品概述 Stimulus是法国达索公司产品&#xff0c;其目的是通过需求建模分析来验证需求的正确性。Stimulus的核心理念是运用“自然语言”对功能性需求进行建模&#xff0c;并通过仿真来查找需求中的缺陷&#xff0c;例如需求一致性、不二义性和完整性检查等。借助Stimulus可以在…

media-ctl 生成拓扑和数据流图

文章目录 前言一、加载驱动模块二、media-ctl 生成拓扑和数据流图1.media-ctl工具将pipeline拓扑生成dot文件2.将dot文件转换为png图片总结参考资料前言 本文主要介绍在Linux下如何通过media-ctl 工具生成生成V4L2 和 Media 框架的拓扑和数据流图 硬件环境:PC 软件环境:ubun…

2023-12-05 Qt学习总结9

点击 <C 语言编程核心突破> 快速C语言入门 Qt学习总结 前言二十五 QFile文件操作总结 前言 要解决问题: 学习qt最核心知识, 多一个都不学. 二十五 QFile文件操作 QFile是Qt提供的文件读写类&#xff0c;支持对文件进行读写、复制、重命名、删除等操作。常用C函数如下&…

用C语言实现字符串的逆置

第一种方法&#xff1a; 用指针像交换两个数一样&#xff0c;创建一个临时变量&#xff0c;从而实现字符串的逆置&#xff01; void Reverse(char* str) {char* left str;//指向字符串数组的左指针char* right str strlen(str) - 1;//指向字符串数组的右指针&#xff0c;因…

内核上项目【通信】

文章目录 目的操作步骤逆向分析实现代码参考文献 目的 在Win7 64位系统上编写驱动利用ExRegisterAttributeInformationCallback注册回调进行通信 操作步骤 1.利用MmGetSystemRoutineAddress获取ExRegisterAttributeInformationCallback中ExpDisSetAttributeInformation、Exp…

接口自动化多层嵌套json数据处理代码实例

最近在做接口自动化测试&#xff0c;响应的内容大多数是多层嵌套的json数据&#xff0c;在对响应数据进行校验的时候&#xff0c;可以通过&#xff08;key1.key2.key3&#xff09;形式获取嵌套字典值的方法获取响应值&#xff0c;再和预期值比较 1 2 3 4 5 6 7 8 9 10 11 12 13…

Enabling Application Engine Tracing 启用应用程序引擎跟踪

Enabling Application Engine Tracing 启用应用程序引擎跟踪 By default, all Application Engine traces are turned off. To see a trace or a combination of traces, set trace options before you run a program. 默认情况下&#xff0c;所有应用程序引擎跟踪都处于关闭…

自动化测试基础知识:什么是自动化测试?需要学习哪些知识与工具!

1、自动化测试概念 自动化测试是把以人为驱动的测试行为转化为机器执行的一种过程。通常&#xff0c; 在设计了测试用例并通过评审之后&#xff0c;由测 试人员根据测试用例中描述的规程一步步执行测试&#xff0c;得到实际结果与期望结果的比较。简言之&#xff0c;自动化测试…

12.12 作业

1&#xff0c; 源代码&#xff1a; #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);speerornew QTextToSpeech(this);idstartTimer(1000);//每隔一秒&#xf…

LLM之RAG理论(一)| CoN:腾讯提出笔记链(CHAIN-OF-NOTE)来提高检索增强模型(RAG)的透明度

论文地址&#xff1a;https://arxiv.org/pdf/2311.09210.pdf 检索增强语言模型&#xff08;RALM&#xff09;已成为自然语言处理中一种强大的新范式。通过将大型预训练语言模型与外部知识检索相结合&#xff0c;RALM可以减少事实错误和幻觉&#xff0c;同时注入最新知识。然而&…

【无标题】重生奇迹mu召唤萤石魂石最强搭配

荧光宝石搭配&#xff1a; 1、每个装备上都会有不同的孔洞&#xff0c;所镶嵌的3个宝石都是不相同的。 2、宝石也分为很多的种类。选择比较困难。 推荐搭配&#xff1a; 如果有宝石等级比较高&#xff0c;那么就选择高的来搭配。最好的搭配是就是同样的属性搭配一套&#x…

优雅玩转实验室服务器(一)登录服务器

这篇文章更加偏向于使用python程序进行研究的朋友们 原料 Windows主机实验室Linux服务器&#xff08;可以访问互联网&#xff09;一点点耐心 step.0 windows terminal is all you need 别跟我说什么putty&#xff0c;什么winscp&#xff0c;我就是单推Win11自带的软件——win…

005、Softmax损失

之——softmax与交叉熵 杂谈 我们常用到softmax函数与交叉熵的结合作为损失函数以监督学习&#xff0c;这里做一个小小的总结。 正文 1.softmax的基本改进 所谓softmax就是在对接全连接层输出时候把输出概率归一化&#xff0c;最基础的就是这样&#xff1a; 效果就是这样&…

【Android嵌入式开发及实训课程实验】【项目1】 图形界面——计算器项目

【项目1】 图形界面——计算器项目 需求分析界面设计实施1、创建项目2、 界面实现实现代码1.activity_main.xml2.Java代码 - MainActivity.java 3、运行测试 注意点结束~ 需求分析 开发一个简单的计算器项目&#xff0c;该程序只能进行加减乘除运算。要求界面美观&#xff0c;…