ts axios 指定返回值类型,返回数据类型不确定该怎么办 typescript

ts axios 指定返回值类型,返回数据类型不确定该怎么办 typescript

转到 ts 以来,一直有个问题困扰着我,就是每次用 axios 获取数据时,返回值 res 的类型都不能确定,这就导致编辑器一直提示我:

在这里插入图片描述

原因

原因是它确实不知道这个 diaryApi.detail 返回的 Promise 的内容是什么类型,是什么结构,所以我们需要给它指定一下。

我项目中是这样使用 axios 的:

  1. 封装 axios 到一个通用方法,在这个方法里处理错误信息
    在这里插入图片描述

  2. 再封装一层,这层是基于项目中每个模块的功能进行拆分的,比如:

    • 日记相关 api
    • 用户相关 api
      在这里插入图片描述

解决

首先要做的是给最原始的返回 Promise 的方法添加返回类型: Promise<你需要的类型内容>
我的这个项目返回值很规整,都是这种类型

{success: boolean, data: Array<any>|any, message: string
}

没加之前它的返回值是 Promise<?>
在这里插入图片描述

给它加上类型:
在这里插入图片描述
这只是加了一个大体的类型,现在至少使用 res.data res.success 能正常识别了。

在这里插入图片描述

目前它只知道返回值是 {success, data, message} 这种类型的,再往下, res.data 里是什么内容它就不知道了,这个无法统一,因为这个 data 可能是任何内容,如果想让返回值里更明确,就需要在第二层 diaryApi.ts, userApi.ts 指定明确的返回值。

在这里插入图片描述

拿这个 diaryApi.list() 接口为例,指定它的返回值类型

 res.data: Array<DiaryEntity>

在这里插入图片描述

这里的 DiaryEntity 是我定义的一个类型,其内容如下:

在这里插入图片描述

现在它就知道返回值 res.dataDairyEntity[] 这种类型的数组数据了,里面是 DiaryEntity 类型的数据,能更进一步的进行代码提示,像下面这样,它提示 DiaryEntity 里并没有 .weekday 属性

在这里插入图片描述

总结

jsts 相比,ts 适合大型项目,只要把类型写全,再写的时候还是非常爽的,有非常健全的代码提示,确实方便。
但对于小项目,所有类型都需要写两遍,得不偿失。
可以说 ts 是穿在 js 身上的一层盔甲,在上战场的时候用,在家里捏蚂蚁不需要 ts,甚至用了会更麻烦。

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

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

相关文章

SPON世邦 IP网络对讲广播系统 多处文件上传漏洞复现

0x01 产品简介 SPON世邦IP网络对讲广播系统是一种先进的通信解决方案,旨在提供高效的网络对讲和广播功能。 0x02 漏洞概述 SPON世邦IP网络对讲广播系统 addscenedata.php、uploadjson.php、my_parser.php等接口处存在任意文件上传漏洞,未经身份验证的攻击者可利用此漏洞上…

Mac M1 Parallels CentOS7.9 Deploy Docker + Rancher + K8S(HA+More Master)

一、准备虚拟机资源 虚拟机清单 机器名称IP地址角色rancher10.211.55.200管理K8S集群k8svip10.211.55.199K8S VIPmaster0110.211.55.201K8S集群主节点master0210.211.55.202K8S集群主节点master0310.211.55.203K8S集群主节点node0110.211.55.211K8S集群从节点node0210.211.55…

Vue 自定义仿word表单下拉框组件,让操作更符合用户习惯

预览时显示界面 进入编辑框时 组件代码 <template><div class "paper-select ui-select flex flex-col full-width" ><div ref"content" class"content font-s flex flex-center-cz padding-left-m padding-right-m flex-space-be…

C++入门教程,C++基础教程(第一部分:从C到C++)七

由C语言发展而来的一种面向对象的编程语言。 第一部分、从C语言到C 本章讲述 C 语言的简史&#xff0c;以及 C 语言中与面向对象关系不大、C语言中没有的特性。这些特性能够增加编程的便利性&#xff0c;提高程序的可扩充性。 十三、如何规范地使用C内联函数 inline 关键字…

Mac M1 Parallels CentOS7.9 Install Parallels Tools

一、挂载parallels-tools安装包 mkdir /media/cdrom/ mount /dev/cdrom /media/cdrom/ mount: /dev/sr0 写保护&#xff0c;将以只读方式挂载二、GCC升级 yum install -y centos-release-scl yum install -y devtoolset-8-gcc*# 切换当前会话中gcc版本为8 scl enable devtool…

TypeScript 从入门到进阶之基础篇(八)函数篇

系列文章目录 TypeScript 从入门到进阶系列 TypeScript 从入门到进阶之基础篇(一) ts基础类型篇TypeScript 从入门到进阶之基础篇(二) ts进阶类型篇TypeScript 从入门到进阶之基础篇(三) 元组类型篇TypeScript 从入门到进阶之基础篇(四) symbol类型篇TypeScript 从入门到进阶…

Open CASCADE学习|Draw Harness

目录 显示长方体 提供帮助信息 执行文件 记录交互式命令 使用getsourcefile可以快速查找到Tcl命令对应的C源文件 在Tcl中内置了一些变量&#xff0c;并赋予了一定的功能。内置变量列表如下&#xff1a; 退出 加载插件 在屏幕显示变量 返回绘图变量信息 视图 mu, md…

【Spring实战】25 Spring Boot Admin 应用

文章目录 1. 查看健康信息2. 使用 Micrometer 和 "/metrics"3. 管理包和类的日志级别4. 其他功能总结 Spring Boot Admin 是一个功能强大的工具&#xff0c;用于监控和管理多个 Spring Boot 应用程序。通过上一篇文章 【Spring实战】24 使用 Spring Boot Admin 管理…

equals()与hashCode()方法详解

java.lang.Object类中有两个非常重要的方法&#xff1a; 1 2 public boolean equals(Object obj) public int hashCode() Object类是类继承结构的基础&#xff0c;所以是每一个类的父类。所有的对象&#xff0c;包括数组&#xff0c;都实现了在Object类中定义的方法。 回到…

嵌入式培训机构四个月实训课程笔记(完整版)-Linux系统编程第五天-Linux消息共享内存练习题(物联技术666)

更多配套资料CSDN地址:点赞+关注,功德无量。更多配套资料,欢迎私信。 物联技术666_嵌入式C语言开发,嵌入式硬件,嵌入式培训笔记-CSDN博客物联技术666擅长嵌入式C语言开发,嵌入式硬件,嵌入式培训笔记,等方面的知识,物联技术666关注机器学习,arm开发,物联网,嵌入式硬件,单片机…

2024龙年艺术字矢量Ai设计文件60套

2024新年将至&#xff0c;设计师们早已开始为龙年海报、推文的制作摩拳擦掌。该合集不仅内容丰富多样,作为矢量文件资源&#xff0c;也能够让设计者更为轻松地编辑与创作。 合集内另附200多张电脑壁纸。 文件总大小368MB 链接&#xff1a;https://pan.quark.cn/s/0caab4cf065…

电商API-获取拼多多商品详情数据精准价格API测试示例

pinduoduo.item_get_app_pro获取拼多多商品详情数据 如何获取apikey&#xff1f; 公共参数 名称类型必须描述keyString是调用key&#xff08;必须以GET方式拼接在URL中&#xff09;secretString是调用密钥api_nameString是API接口名称&#xff08;包括在请求地址中&#xff…

【Leetcode】移除后集合的最多元素数

目录 &#x1f4a1;题目描述 &#x1f4a1;思路 &#x1f4a1;总结 100150. 移除后集合的最多元素数 &#x1f4a1;题目描述 给你两个下标从 0 开始的整数数组 nums1 和 nums2 &#xff0c;它们的长度都是偶数 n 。 你必须从 nums1 中移除 n / 2 个元素&#xff0c;同时从 …

Centos 配置 DNS 服务器

在连网的情况下&#xff0c;安装 DNS 服务器&#xff0c;使用命令&#xff1a; yum install bind 安装完成过后&#xff0c;关闭 DNS 服务器防火墙命令&#xff1a; systemctl stop firewalld 在 “ # ” 输入命令&#xff1a; gedit /etc/named.conf 进入过后将 listen…

Docker给容器添加新端口映射

Docker容器添加新端口映射 查看运行的容器 docker ps查看容器挂载目录 docker inspect [容器id]我这里是[容器name] 停止容器 docker stop pythonWarning: Stopping docker.service, but it can still be activated by: docker.socket 停止docker服务 systemctl stop dock…

网络安全—SSL安全访问应用

文章目录 网络拓扑部署CA服务器颁发证书开启Web服务安装IIS服务修改Web默认网页 申请Web证书前提准备申请文件生成申请web证书开始安装web证书 客户机访问web默认网站使用HTTP使用HTTPS 为客户机安装浏览器证书 环境&#xff1a;Windows Server 2003 网络拓扑 这里使用NAT还是…

x64dbg的基本使用

目录 x64dbg简介 术语 打开程序 x64dbg打开界面介绍 汇编窗口 内存窗口 寄存器窗口 堆栈窗口 基本调试方法 搜索字符串 退出程序 x64dbg简介 x64dbg是软件逆向里必不可少的动态调试工具&#xff0c;本来考虑学习一下OD&#xff0c;但是考虑到OD很久之前就已经停止维…

ArcGIS制图技巧总结

Part 1 制图综述 1.1 制图的目的 随着GIS在各行各业的深入应用&#xff0c;各信息化部门和生产单位都逐渐建立起自己的GIS的应用&#xff0c;同时积累了大量的地理数据。随着应用深度和广度的推进&#xff0c;针对数据建立专题应用越来越迫切&#xff0c;对行业专题制图的需…

2024拜年祝福视频AE模板31套

做短视频必备的AE模板非常好看&#xff0c;跨年做个视频非常漂亮&#xff0c;喜欢的赶紧保存吧&#xff01; 链接&#xff1a;https://pan.quark.cn/s/fc1f3db12049

XML技术分析03

一、XMLHttpRequest 对象 XMLHttpRequest 对象用于在后台与服务器交换数据。 创建 XMLHttpRequest 对象 所有现代浏览器 (IE7、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。 通过一行简单的 JavaScript 代码&#xff0c;我们就可以创建 XMLHttpReq…