Typescript 练习

embedded/2025/1/16 0:07:19/

1. 类型谓词

格式:类型谓词采用parameterName is Type格式,其中parameterName必须是当前函数的参数

interface Iuser {type: 'user'name: stringage: numberoccupation: string
}interface Iadmin {type: 'admin'name: stringage: numberrole: string
}export type Person = Iuser | Iadminexport const person: Person[] = [{ type: 'user', name: 'Max Mustermann', age: 25, occupation: 'Chimney sweep' },{ type: 'admin', name: 'Jane Doe', age: 32, role: 'Administrator' },{ type: 'user', name: 'Kate Müller', age: 23, occupation: 'Astronaut' },{ type: 'admin', name: 'Bruce Willis', age: 64, role: 'World saver' },
]// 类型谓词
const isAdmin = (person: Person): person is Iadmin => {return person.type === 'admin'
}// 类型谓词
const isUser = (person: Person): person is Iuser => {return person.type === 'user'
}export const logPerson = (person: Person) => {let test: string = ''if (isAdmin(person)) {test = person.role}if (isUser(person)) {test = person.occupation}console.log('test:', test)
}

核心代码:

const isAdmin = (person: Person): person is Iadmin => {return person.type === 'admin'
}const isUser = (person: Person): person is Iuser => {return person.type === 'user'
}

如果不使用类型收缩的话,会提示类型不存在

使用场景:在接口返回数据中,有两个不同的字段需要展示在table上时,前端做类型接收,使用interface定义两个接口,在处理数据时,判断当前的数据内容符合哪一个interface进行赋值,使用is进行类型收缩。


http://www.ppmy.cn/embedded/18209.html

相关文章

ionic 中对Input输入框、searchbar进行solr检索

一、概述 Ionic 是一个用于开发跨平台应用程序的开源工具,可以使用 Angular、React 或 Vue 等前端框架。要在 Ionic 应用程序中实现实时与 Solr 通信,可以使用 HTTP 客户端(如 Angular 的 HttpClient 或 Ionic 的 Native HTTP)…

hcia datacom课程学习(7):直连路由、静态路由

直连路由路由器接口上的网络(接口配置了IP地址并且开启)静态路由管理员手工添加的网络动态路由路由器之间动态学习形成的网络 1.直连路由 每当给路由器的一个接口配置了ip,路由表中就会产生对应的直连路由 配置路由接口ip的命令&#xff1…

计算二维主应力的前端界面

<!DOCTYPE html> <html> <head> <title>二维主应力</title> </head> <body> <h2>计算二维主应力</h2> <form> <label for"input1">σ_1(Mpa):</label> <input type"t…

什么是RAG技术

RAG概念 RAG&#xff08;Retrieval-Augmented Generation&#xff09;技术是一种结合检索和生成功能的自然语言处理&#xff08;NLP&#xff09;技术。它通过从大型外部数据库中检索与输入问题相关的信息&#xff0c;来辅助生成模型回答问题。RAG技术的核心思想是将传统的检索技…

02.Scala简单演示

Scala创建对象的方法与Java有所不同 class可以直接传入形参&#xff1b; 形式为 变量名称&#xff1a;变量类型 逗号隔开 ** ** 方法定义也比较特殊 ** ** def方法名&#xff08;&#xff09;:返回值 { } 其中返回值Unit 等价于Java中的void

python利用tg机器人推送发消息从安装到使用(二)

上一篇请参考: python利用tg机器人推送发消息从安装到使用-CSDN博客 本篇主要针对第二种方式推送tg消息,也就是使用telegram库的Bot发送消息,不仅可以发送文本,还可以方便的发送超链接内容和图片。 不过,随着telegram库的升级等各种原因,目前网上很多代码都不能直接使…

Vue 3 + TypeScript + Vite 2024年4月最新管理系统基建

Vue 3 TypeScript Vite 2024年4月最新管理系统基建 相关依赖 vue: ^3.4.21vite: ^5.2.0typescript: ^5.2.2eslint: ^9.0.0 1. 初始化项目 1.1 node版本要求 node: v18.17.1 1.2. 创建项目 使用 PNPM: # 创建项目 pnpm create vite vue3-element-template --template …

ruoyi element-ui 实现拖拉调整图片顺序

ruoyi element-ui 实现拖拉调整图片顺序 安装sortablejs https://sortablejs.com/npm 安装sortablejs npm install sortablejs --save相关options var sortable new Sortable(el, {group: "name", // or { name: "...", pull: [true, false, clone, …