ts定义接口返回写法

接口(未进行ts定义)

export async function UserList(params: {// keyword?: string;current?: number;pageSize?: number;},// options?: { [key: string]: any },
) {return request<API1.UserList>('http://geek.itheima.net/v1_0/mp/articles', {method: 'GET',params: {...params,},// ...(options || {}),});
}

接口(ts定义类型)

// 获取数据
export async function UserList(params?:API1.QueryParams
) {return request<API1.UserList>('http://geek.itheima.net/v1_0/mp/articles', {method: 'GET',params: {...params,});
}
   //定义查询参数的类型(要传给后端的参数类型)export interface QueryParams{status?:string;channel_id?:string;begin_pubdate?:string;end_pubdate?:string;page?:number;per_page?:number}//定义一行的数据类型(用于在ProColumns使用)export interface ProColumns{comment_count:number;cover:covers;id:string;like_count:number;pubdate:Date;read_count:number;status:number;title:string;}

定义columns (定义每一行对象的数据类型)

定义接口返回值类型

ProTable组件定义类型(和columns定义的类型数据一样,都是定义每一行对象的数据类型)

定义方法的形参

tsx文件中的方法  
const Clickdelete = async (record:API1.records) => {console.log(record,'record')confirm({title: `是否删除id为${record.id}的数据`,icon: <ExclamationCircleFilled />,content: '删除数据',okText: '确定',okType: 'danger',cancelText: '取消',async onOk() {const res = await DeleteList(record.id);actionRef.current?.reloadAndRest?.();message.success('删除成功');},// 取消的事件onCancel() {},});};tsx文件中的页面const columns: ProColumns<API1.ProColumns>[] = 
[{title: '操作',valueType: 'option',key: 'option',render: (text, record, _, action) => [<Button type="primary" key="editable" onClick={() => ClickEmit(record)}>编辑</Button>,<Buttonkey="deleteable"type="primary"dangeronClick={() => Clickdelete(record)}>删除</Button>,],},]ts文件//传入的数据(在这里是这一行对象的数据)export interface records{id: string,title: string,status: number,comment_count: number,pubdate: Date,cover: covers,like_count: number,read_count: number}

useState定义类型

  // 定义 record 对象的类型
interface RecordType {obj: any; // 根据实际的 obj 类型进行替换title: string;Isloding: boolean;
}定义state数据
// useState<RecordType | null>(null) 来初始化 record 状态,这样 record 可以是 RecordType 类型的对象或 null。const [Record,setRecord] =  useState<RecordType | null>(null);使用setRecord({obj:record,title:'修改数据',Isloding:true})

遍历每一项定义类型

没定义前

定义后

由于每一项只有两个字段,所以就定义了两个

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

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

相关文章

#多语言爬取京东价格信息 python 比价api接入指南

以下是使用 Python 接入京东价格信息比价 API 的一般指南&#xff1a; 寻找合适的比价 API 服务&#xff1a; 市面上有一些第三方数据服务提供商提供京东比价 API。这些服务通常需要你注册账号并申请 API Key 和 API Secret 等凭证&#xff0c;以便进行接口调用。你可以根据自己…

超详细:三大范式和反范式设计详解

目录 1、三大范式 第一范式&#xff1a; 列不可再分 。 第二范式&#xff1a; 行可以唯一区分 第三范式&#xff1a;确保数据的完整性、减少数据冗余和避免更新异常。 反方式模式 实验数据&#xff1a;模拟两张百万量级的数据表 反范式优化实验对比 反范式存在的问题 &am…

新标准大学英语综合教程1课后习题答案PDF第三版

《新标准大学英语&#xff08;第三版&#xff09;综合教程1 》是“新标准大学英语&#xff08;第三版&#xff09;”系列教材之一。本书共包含6个单元&#xff0c;从难度和话题上贴近大一上学生的认知和语言水平&#xff0c;包括与学生个人生活领域和社会文化等相关内容&#x…

Llama 3.2-Vision 多模态大语言模型

1. 引言 Llama 3.2-Vision多模态大型语言模型(文本 图像)是一个图像推理生成模型&#xff0c;按照官方的说法&#xff0c;在常见行业基准测试上&#xff0c;其性能优于许多可用的开源和闭源多模态模型。Llama 3.2-Vision有两个版本&#xff0c;一个是11B (7.9G)&#xff0c;另…

OpenObserve云原生平台指南:在Ubuntu上快速部署与远程观测

文章目录 前言1. 安装Docker2. Docker镜像源添加方法3. 创建并启动OpenObserve容器4. 本地访问测试5. 公网访问本地部署的OpenObserve5.1 内网穿透工具安装5.2 创建公网地址 6. 配置固定公网地址 前言 本文主要介绍如何在Linux系统使用Docker快速本地化部署OpenObserve云原生可…

隧道论文阅读2-采用无人融合扫描数据的基于深度学习的垂直型隧道三维数字损伤图

目前存在的问题&#xff1a; 需要开发新的无人测量系统测量垂直隧道图像数据量巨大&#xff0c;基于深度学习完成损伤评估跟踪获取图像位置的困难&#xff0c;对大型基础设施感兴趣区域(roi)的2d和3d地图建立进行了研究&#xff0c;对整个目标结构的损伤定位仍然具有挑战性。为…

【从VAE到LDM】Variational Auto Encoder原理以及关于Latent Diffusion的思考

论文链接&#xff1a;High-Resolution Image Synthesis with Latent Diffusion Models 官方实现&#xff1a;CompVis/latent-diffusion、CompVis/stable-diffusion 视频讲解&#xff1a;一个视频看懂VAE的原理以及关于latent diffusion的思考 前言 目前的扩散模型范式基本上都…

1111fxh,MYSQL加锁规则

怎么查看一个事务中对索引的加锁情况 -- 这条语句可以看到事务执行过程中加了哪些锁 select * from performance_schema.data_locks X是next-key lock 混合锁 X,REC_NOT_GAP就是行锁 X,GAP是间隙锁 可重复读下的加锁规则 2原则2优化 1.加锁的基本单位是next-key lock,即行…

mysql中数据不存在却查询到记录?

前言 首先看下面的查询语种 select * from AudioKnowledgeChatInfo where AudioId297795550566600706; 查询结果如下 看到上面的查询结果&#xff0c;是不是一脸懵&#xff1f;这audioId明显不对啊&#xff0c;怎么查询到了&#xff1f; 原因剖析 首先我们来看看数据库表…

拿不下总统之位,那就用热加载拿下验证码识别与爆破好了!

大家好&#xff0c;这里是在总统选举中惜败的超级牛 虽然没能拿下阿美利卡总统之位 但是牛牛的热加载功能&#xff0c;却能轻松拿下验证码的识别与爆破 验证码一般会在注册、登录等功能&#xff0c;用来防止自动化工具的攻击。一般的验证码生成过程如下图所示&#xff1a; …

闯关leetcode——202. Happy Number

大纲 题目地址内容 解题代码地址 题目 地址 https://leetcode.com/problems/happy-number/description/ 内容 Write an algorithm to determine if a number n is happy. A happy number is a number defined by the following process: Starting with any positive inte…

如何使用 Web Scraper API 高效采集 Facebook 用户帖子信息

目录 前言一、什么是Web Scraper API二、Web Scraper API 的优势&#xff1a;三、Web Scraper API 适用场景四、实践案例目标需求视频讲解1、选择Web Scraper API2、登录注册3、进入用户控制面板4、选择API5、触发数据收集 API6、获取爬虫结果7、分析爬虫结果&#xff08;1&…

json转excel,读取json文件写入到excel中【rust语言】

一、rust代码 将json文件写入到 excel中。&#xff08;保持json &#xff1a;key原始顺序&#xff09; use indexmap::IndexMap; use serde::Deserialize; use serde_json::{Value, from_str}; use std::error::Error; use std::io::{self, Write}; use std::path::{Path}; u…

2024年下半年系统规划与管理师论文真题

试题一、论IT服务规划设计 IT服务规划设计处于整个IT服务生命周期中的前端&#xff0c;可以帮助IT服务供方了解客户的需求并对其进行全面的需求分析&#xff0c;规划设计的范围不仅包括新的服务&#xff0c;还包括服务连续性保障服务水平的满足和对标准、规则的遵从&#xff0…

无人机动力测试台如何快速外接第三方传感器

前言 动力测试台对于测试动力系统的拉力、扭矩、RPM 和效率至关重要。将传感器集成到您的测试中增加了另一层优化&#xff0c;可以将您的性能提升到一个新的水平。 在无人驾驶行业中&#xff0c;有充分的证据表明&#xff0c;从外部传感器收集数据可能具有挑战性。为了解决这…

金蝶云星空与旺店通数据集成解决方案实例

金蝶云星空与旺店通旗舰奇门的数据集成案例分享 在企业日常运营中&#xff0c;数据的高效流转和准确对接是确保业务顺畅运行的关键。本文将聚焦于一个具体的系统对接集成案例&#xff1a;如何将金蝶云星空中的直接调拨单数据无缝集成到旺店通旗舰奇门平台。 本次集成方案命名…

gorm使用注意事项

1. 使用updates更新字段为0或""时 在updates更新时&#xff0c;会默认将数值为0、字符串为""等忽略掉&#xff0c;不会更新&#xff1b;比如 db.Model(&user).Updates(User{Name: "hello", Age: 18, Active: false, Games: 0, Friend: &qu…

docker compose - 设置名字

只使用 docker compose up 启动容器&#xff0c;默认名字为当前文件夹的名字 设置 project-name&#xff0c;docker 客户端会显示设置的名字&#xff0c;方便区分 docker compose --project-name webtest up错误&#xff1a; docker compose up --project-name webtest 效果…

破解反向代购复杂挑战,一站式简化逆向海淘购物

在全球化日益加深的今天&#xff0c;反向代购行业迎来了前所未有的发展机遇&#xff0c;同时也伴随着一系列挑战。这些企业不仅需要穿梭于世界各地的商场与网店&#xff0c;搜罗各式各样的商品&#xff0c;还要应对商品众多、客户下单繁杂以及客户细分需求多样化的现实问题。想…

户型超赞!招商“超级大城”再腾飞!三期新品全面升级!即将首开!

2024年9月底&#xff0c;美联储降息带来整体政策方向全面转变楼市组合大招密集落地&#xff0c;力度非同寻常。先是降息、降准、降存量房贷利率等货币宽松政策&#xff0c;到国家首提“止跌回稳”再到上海、深圳等一线城市连夜出台限购优化政策。在利好扶持重磅加码&#xff0c…