首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

有没有办法添加鉴别器属性,以便使用Axios + Typescript将数据读取到已判别的联合对象中?

当然有办法!在 TypeScript 中,我们可以使用类型谓词(type predicates)和条件类型来为联合类型添加鉴别器属性。这样,当使用 Axios 获取数据时,我们可以确保数据符合预期的类型。

以下是一个示例,展示了如何使用 TypeScript 为联合类型添加鉴别器属性:

代码语言:javascript
复制
// 定义一个接口,表示 API 响应的数据结构
interface ApiResponse {
  id: number;
  name: string;
}

// 定义一个联合类型,表示可能的 API 响应数据结构
type ApiResponseType = ApiResponse | {
  error: string;
};

// 创建一个类型谓词,用于鉴别是否是有效的 ApiResponse 类型
function isApiResponse(obj: any): obj is ApiResponse {
  return obj && typeof obj.id === 'number' && typeof obj.name === 'string';
}

// 使用 Axios 获取数据
async function fetchData(): Promise<ApiResponseType> {
  const response = await axios.get<ApiResponseType>('/api/data');
  return response.data;
}

// 使用类型谓词来处理获取到的数据
async function processData(): Promise<void> {
  const data = await fetchData();

  if (isApiResponse(data)) {
    // 在这里,TypeScript 可以确保 `data` 是有效的 `ApiResponse` 类型
    console.log(data.id, data.name);
  } else {
    // 在这里,TypeScript 可以确保 `data` 是包含 `error` 属性的对象
    console.error('Error:', data.error);
  }
}

processData();

在这个示例中,我们首先定义了一个 ApiResponse 接口和一个 ApiResponseType 联合类型。然后,我们创建了一个 isApiResponse 函数,该函数使用类型谓词来鉴别是否是有效的 ApiResponse 类型。最后,我们使用 axios.get 获取数据,并使用 isApiResponse 函数来处理数据。

这样,当使用 Axios 获取数据时,我们可以确保数据符合预期的类型,并在 TypeScript 中获得更好的类型检查和代码补全支持。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

《现代Typescript高级教程》扩展类型定义

在这篇文章,我们详细探讨如何通过声明文件扩展类型定义。 什么是声明文件? 在 TypeScript ,声明文件是一种以 .d.ts 为扩展名的特殊文件,它不包含具体的实现,只包含类型声明。...通过使用 declare 关键字,我们可以在声明文件描述出我们所需要的类型信息,以便 TypeScript 编译器进行类型检查和类型推断。...我们可以通过创建一个声明文件来为该库添加类型声明,以便TypeScript 代码中使用该库的时候获得类型检查和自动完成的支持。...然后,我们通过 export 关键字 request、get 和 post 等函数导出为模块的公共 API,以便在其他文件中使用这些函数。...现在,在我们的 TypeScript 代码,我们可以通过导入 axios 模块来使用这些类型声明,以及使用 axios 库的方法: import axios, { AxiosResponse, AxiosRequestConfig

56610
  • 巧用 TypeScript(三)

    ('http://some.1'), axios.get('http://some.2') ]) 复制代码 此时,TypeScript 能推出 a 的类型是 A, b 的类型是 B。...type C = A | B; type D = A & B; 复制代码 对象字面量类型 对于对象字面量的类型,TypeScript 有一个被称之为 「Freshness 」的概念,它也被称为更严格的对象字面量检查...; // ok 复制代码 TypeScript 认为创建的每个对象字面量都是 「 fresh 」 状态;当一个 「 fresh 」 对象字面量赋值给一个变量时,如果对象的类型与变量类型不兼容时...,会出现报错(如上例子 someThine = { name: 'hello', age: 123 }; 的错误);当对象字面量的类型变宽,对象字面量的 「 fresh 」 状态会消失(如上例子 someThing...{ name: string } 属性不存在。

    1.1K20

    Vue 3.0前的 TypeScript 最佳入门实践

    Typescript,你必须在函数定义返回类型。像这样: ? 若没有返回值,则会报错: ? 我们可以将其返回值定义为 void: ? 此时无法 return 4. Any ?...: 当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候,我们只能访问此联合类型的所有类型里共有的属性或方法: function getLength(something: string...支持现有的数据类型和将来添加数据类型的组件为大型软件系统的开发过程提供很好的灵活性。 在 C#和 Java,可以使用"泛型"来创建可复用的组件,并且组件可支持多种数据类型。...例如给函数传入的参数对象只有部分属性赋值了。带有可选属性的接口与普通的接口定义差不多,只是在可选属性名字定义的后面加一个 ?符号。...: number; } 只读属性 顾名思义就是这个属性是不可写的,对象属性只能在对象刚刚创建的时候修改其值。

    3.5K20

    【Vuejs】301- Vue 3.0前的 TypeScript 最佳入门实践

    Typescript,你必须在函数定义返回类型。像这样: ? 若没有返回值,则会报错: ? 我们可以将其返回值定义为 void: ? 此时无法 return 4. Any ?...: 当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候,我们只能访问此联合类型的所有类型里共有的属性或方法: function getLength(something: string...支持现有的数据类型和将来添加数据类型的组件为大型软件系统的开发过程提供很好的灵活性。 在 C#和 Java,可以使用"泛型"来创建可复用的组件,并且组件可支持多种数据类型。...例如给函数传入的参数对象只有部分属性赋值了。带有可选属性的接口与普通的接口定义差不多,只是在可选属性名字定义的后面加一个 ?符号。...: number; } 只读属性 顾名思义就是这个属性是不可写的,对象属性只能在对象刚刚创建的时候修改其值。

    4.4K52

    Vue 3.0前的 TypeScript 最佳入门实践

    Typescript,你必须在函数定义返回类型。像这样: ? 若没有返回值,则会报错: ? 我们可以将其返回值定义为 void: ? 此时无法 return 4. Any ?...: 当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候,我们只能访问此联合类型的所有类型里共有的属性或方法: function getLength(something: string...支持现有的数据类型和将来添加数据类型的组件为大型软件系统的开发过程提供很好的灵活性。 在 C#和 Java,可以使用"泛型"来创建可复用的组件,并且组件可支持多种数据类型。...例如给函数传入的参数对象只有部分属性赋值了。带有可选属性的接口与普通的接口定义差不多,只是在可选属性名字定义的后面加一个 ?符号。...: number; } 只读属性 顾名思义就是这个属性是不可写的,对象属性只能在对象刚刚创建的时候修改其值。

    2.5K20

    Vue 3.0前的 TypeScript 最佳入门实践

    Typescript,你必须在函数定义返回类型。像这样: ? 若没有返回值,则会报错: ? 我们可以将其返回值定义为 void: ? 此时无法 return 4. Any ?...: 当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候,我们只能访问此联合类型的所有类型里共有的属性或方法: function getLength(something: string...支持现有的数据类型和将来添加数据类型的组件为大型软件系统的开发过程提供很好的灵活性。 在 C#和 Java,可以使用"泛型"来创建可复用的组件,并且组件可支持多种数据类型。...例如给函数传入的参数对象只有部分属性赋值了。带有可选属性的接口与普通的接口定义差不多,只是在可选属性名字定义的后面加一个 ?符号。...: number; } 只读属性 顾名思义就是这个属性是不可写的,对象属性只能在对象刚刚创建的时候修改其值。

    2.6K31

    TypeScript 在 Vue 的实践

    code-7.png 配置默认是全家桶,其中预处理器建议使用 less,如果使用 sass 可能会因为各种莫名其妙的原因安装不上 node-sass;babel 也是必选的,目的是 TypeScript...在 TypeScript ,不能再像原来一样写基于配置的 mixin 对象,而应该也写为一个 Vue 的子类: import { Vue, Component } from 'vue-property-decorator...,这样在导入请求方法时也可以同时导入接口声明; get set 的使用 TypeScript 不再使用 computed 定义计算属性,而是通过 class 本身的 get set 定义,使用的方式和原来相同...路由的组件导航守卫失效 路由的导航钩子不属于 Vue 本身,这会导致 class 组件转义到配置对象时导航钩子无效,因此如果要使用导航钩子需要在 router 的配置里声明 axios 填坑 使用...: any; } 通常我们会在 axios.interceptors.response.use 这个拦截方法取出 res.data,但是这样会导致 axios 返回数据的类型推断失败(即使取出来了,axios

    2.6K30

    基于TypeScript封装Axios笔记(一)

    当我们使用 TypeScript 去写一个项目的时候,还需要配置 TypeScript 的编译配置文件 tsconfig.json 以及 tslint.json 文件。...TypeScript library starter 它是一个开源的 TypeScript 开发基础库的脚手架工具,可以帮助我们快速初始化一个 TypeScript 项目,我们可以去它的官网地址学习和使用它...使用方式 1git clone https://github.com/alexjoverm/typescript-library-starter.git ts-axios 2cd ts-axios 3...method 是请求的 HTTP 方法;data 是 post、patch 等类型请求的数据,放到 request body 的;params 是 get、head 等类型请求的数据,拼接到 url...,并且还定义了一些默认值,因为在 AxiosRequestConfig 接口的定义,有些属性是可选的。

    3.5K20

    分享 30 道 TypeScript 相关面的面试题

    07、在 TypeScript 中将属性标记为可选时,使用什么语法?你为什么要这样做? 答案:在 TypeScript ,? 符号用于属性标记为可选,例如 name?: string。...答案:readonly 关键字当作为变量或属性的前缀时,可确保一旦设置其值,此后就无法修改。它对于确保在使用配置对象或在组件或函数之间传递数据等场景的不变性特别有用。...公共属性(通常称为“鉴别器”)允许我们在联合内的类型之间安全地切换,从而更轻松地使用此类对象。 12、继承在 TypeScript 如何发挥作用?...派生类还可以重写继承的方法或属性,甚至用新的方法或属性扩展对象结构。 13、装饰器在 TypeScript 扮演什么角色?...答:装饰器受到 Python 和 Java 等语言中注释的启发,提供了一种添加数据或修改类定义、方法、属性或方法参数的方法。

    77830

    TypeScript 4.3 beta 版本正式发布:新增import语句补全,对模板字符串类型进行改进

    let mySize: number = thing.size; 考虑两个具有相同名称的属性之间的关系时,TypeScript 使用”类型(例如上面的 get 访问器上的类型),仅在直接写入属性时才考虑...Number.isFinite(num)) { size = 0; return; } size = num; } } } 实际上,我们已经在接口 / 对象类型添加了语法,以支持对属性的不同...interface Thing { get size(): number set size(value: number | string | boolean); } 使用不同类型来和写属性时存在一个限制...启用此选项时,除非你显式使用一个 override 关键字,否则重写一个超类的任何方法生成错误。...在 TypeScript 4.3 ,如果具有一个联合 enum 类型的值与一个不可能相等的数字字面量进行比较,则类型检查器发出错误。

    1.1K40

    一文Web开发 之接口后端接口、类与前端请求、拦截器编写

    一文Web开发 之接口后端接口、类与前端请求、拦截器编写 写在前面:我们开发Web网页的框架可能不同,但其思想都是一致的,Web要做的事情只有前端处理用户交互去后端拿数据 后端保证前端能拿到想要的数据...@ModelAttribute 类开发五步走 一:添加Spring Framework的类标识注解 @RestController 这个注解后面可以跟上命名,当同一个项目中有两个一样的类名时,就可以使用这个注解来进行区别...使用该注解后,使用 log 对象进行管理 四:生成接口文档 @Api(tags = "标题") 这里使用Swagger生成接口文档,方便测试 五:对象管理 使用 @Autowired 来进行依赖注入 接口开发...三:封装好属性数据 记得在业务逻辑类前加上@service标签 业务逻辑层(service)开发小技巧 遇到前端传来数据数据库实体差距过大创建了两个对象的时候,业务逻辑层使用对象拷贝能更快拿到数据...选择你发送请求的技术 比如axios 然后看官方文档要如何操作 axios使用方式如上 第三步 调用获取数据接口 并查看请求有没有发出 第四步 查看请求数据格式并渲染数据 查看到的格式如上 根据数据格式完成数据渲染

    12410

    HTTP 请求库 - Axios 源码分析

    支持了 4 不同的使用方式,无论哪种使用方式,最后都是执行 Axios 实例上的核心方法:request。...可以知道实例 Axios添加了interceptors方法,接下来我们看看源码的实现: // /lib/core/Axios.js // 每个 Axios 实例上都有 interceptors 属性...这里定义了defaults对象,该对象定义了 axios 的一系列默认配置,还记得它是在哪被注入到 axios 的吗?当然是在入口文件axios.js里了。...哎呦,串起来了有没有~好的,重新说回到 xhr 请求,本文只分析浏览器环境 axios 的运行机制,因此接下来,让我们打开....的部分源码,诸如 客户端支持防御 XSRF 攻击、取消请求 等模块没有提及,感兴趣的同学可以打开 GitHub 去读一,相信一定会获益匪浅。

    2.2K31

    也许跟大家不太一样,我是这么用TypeScript来写前端的

    类型体操整花活 要么把属性整成只读了,要么猪狗类型联合了,要么猪尾巴搞丢了,要么牛真的会吹牛逼了。 类型体操确实玩出了很多花活。...反射 Reflect 是 TypeScript 中比较坑的一个存在, 目前主要是依赖 reflect-metadata 这个第三方库来实现, 一些元数据存储到 metadata , 在需要使用的时候通过反射的方式来获取...可以参考这篇文章:TypeScript 的元数据以及 reflect-metadata 实现原理分析[1] 在实际使用, 我们早前用的是 class-transformer 这个库, 之前我对这个库的评价应该是非常高的...核心功能的一些说明 通过反射进行数据转换 如后端API返回的数据按照前端的数据结构强制进行转换, 当后端数据返回乱七八糟的时候,保证前端数据使用不会出现任何问题, 如下 demo class UserEntity..., 可以使用抽象方法或抽象属性(这可是Java没有的)来传入父类实现过程需要的特性参数。

    24520

    基于TypeScript封装Axios笔记(五)

    接口类型定义 根据需求分析,混合对象 axios 本身是一个函数,我们再实现一个包括它属性方法的类,然后把这个类的原型属性和自身属性再拷贝到 axios 上。‍...混合对象实现 混合对象实现思路很简单,首先这个对象是一个函数,其次这个对象要包括 Axios 类的所有原型属性和实例属性,我们首先来实现一个辅助函数 extend。...extend 的最终目的是把 from 里的属性都扩展到 to ,包括原型上的属性。 我们接下来对 axios.ts 文件做修改,我们用工厂模式去创建一个 axios 混合对象。...接着在函数体我们判断 url 是否为字符串类型,一旦它为字符串类型,则继续对 config 判断,因为它可能不传,如果为空则构造一个空对象,然后把 url 添加到 config.url 。...至此我们实现了 axios 函数的重载。官方 axios 支持了一种能力,我们可以去定义返回数据的类型,并在请求的时候指定该类型,然后在响应数据我们就可以获取到数据类型。

    3.5K20

    基于Axios封装HTTP类库

    首先不得否认的是 axios 确实好用,Github 能斩获近 90k 的 star,且基本已成为前端作为数据交互的必备工具。...但是,Node 环境并不是浏览器环境,在 Node 环境运行并不会自动保存 Cookie,还需要手动保存,并将 Cookie 添加至协议头给下一个请求。...(如果是 Python 的话,request 有个 session 方法可以自动保存 cookie,十分方便) 一开始我是自行封装,响应的 set-cookie 全都存在实例对象 http.cookies...就会自动响应的 set-cookie 封装起来,供下次使用 但是正是由于导入了这个包,导致每次请求都需要处理,就会导致请求速度变慢,实测大约是在 100ms 左右,同时导入这个包之后,实例化的对象都将会携带对应...配置拦截器​ 有时候一个网站的协议是这样的,每一条 Post 都自动所有参数进行拼接,然后进行 MD5 加密,并添加为 sign 参数,于是,不得不给每一条请求都进行这样的操作,那么有没有什么能在每次请求的时候

    1K10

    Typescript 使用日志(干货)

    •抽象类是有规律的,抽离的是一个类别的公共部分,而接口只是对相同属性和方法的抽象,属性和方法可以无任何关联。 抽象类的用法如下。...•只读属性•索引类型:字符串和数字•函数类型接口•给类添加类型,构造函数类型 接口中除了可以定义常规属性之外,还可以定义可选属性、索引类型等。...的高级类型包括:交叉类型、联合类型、字面量类型、索引类型、映射类型等,这里我们主要讨论一下 •联合类型•映射类型 联合类型 联合类型是指一个对象可能是多个类型的一个,如:let a :number...实战的优点: 1、发现 es 规范弃用的方法,如:Date.toGMTString。 2、避免了一些不友好的开发代码,如:动态给 obj 添加属性。...实战的问题: 1、还有一些坑不好解决,axios 编写了拦截器之后,typescript 反映不到 response 中去。

    2.5K10
    领券