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

news/2024/7/7 15:39:19

在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}>
                                <input
                                type="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] = updateTask
        return 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://lihuaxi.xjx100.cn/news/1887400.html

相关文章

MATLAB算法实战应用案例精讲-【图像处理】图像分割(基础篇)(二)

目录 前言 知识储备 MATLAB图像处理相关函数 数字图像处理函数 数字图像增强

谈谈常用的分布式ID的设计方案?

典型回答 首先&#xff0c;我们需要明确通常的分布式ID定义&#xff0c;基本的要求包括&#xff1a; 全局唯一&#xff0c;区别于单点系统的唯一&#xff0c;全局是要求分布式系统内唯一。 有序性&#xff0c;通常都需要保证生成的ID是有序递增的。例如&#xff0c;在数据库存…

HTML---列表.表格.媒体元素

文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 一.列表 无序列表 HTML中的无序列表&#xff08;Unordered List&#xff09;用于显示一组项目&#xff0c;每个项目之前没有特定的顺序或编号。无序列表使用<ul>标签来定义&#xff0c;每…

Vue3-03-reactive() 响应式基本使用

reactive() 的简介 reactive() 是vue3 中进行响应式状态声明的另一种方式&#xff1b; 但是&#xff0c;它只能声明 【对象类型】的响应式变量&#xff0c;【不支持声明基本数据类型】。reactive() 与 ref() 一样&#xff0c;都是深度响应式的&#xff0c;即对象嵌套属性发生了…

EasyExcel解决文件读写问题,linux服务器没有安装字体支持而导致出现错误

场景&#xff1a; 在使用 easyexcel 进行导出数据时&#xff0c;在 windows和mac 环境中都能正常导出&#xff0c;但在测试环境 linux 服务器上导出报空指针异常&#xff0c;经排查可能是因为 linux 服务器没有安装字体支持而导致报错 java.lang.NullPointerException…

Spring事务的使用示例和传播行为以及失效场景

文章目录 前言一、Spring事务是什么二、简单示例三、Spring事务的传播行为1. 以下是几种常见的事务传播行为&#xff1a;2. 实现方式 四、Spring事务失效的场景以下是几个常见的导致Spring事务失效的场景&#xff1a; 总结 前言 我们都知道事务提供了一种机制&#xff0c;用于管…

【初阶C++】前言

C前言 1. 什么是C2. C发展史3. C的重要性4. 如何学习C 1. 什么是C C语言是结构化和模块化的语言&#xff0c;适合处理较小规模的程序。对于复杂的问题&#xff0c;规模较大的程序&#xff0c;需要高度的抽象和建模时&#xff0c;C语言则不合适。为了解决软件危机&#xff0c; …

Python学习笔记(四):函数的定义、函数的返回值、None类型、函数说明文档、函数的嵌套调用、局部变量、全局变量、global关键字

目录 一、函数介绍 1. 函数是&#xff1a; 2. 使用函数的好处是&#xff1a; 二、函数的定义&#xff1a; 三、函数的参数 1.传入参数的功能是&#xff1a; 2.函数的传入参数 - 传参定义 3.注意事项&#xff1a; 4.练习&#xff1a;测量体温 四、函数的返回值 1.函数…