typescript 接口和对象类型(四)
// 定义一个接口类型
interface person{
age:number,
name:string,
sex:number
}
那么我们都哪些要注意的事项呢 下面这么写都会报错
// 如果定义一个对象缺少或者添加属性都会报错 也就是说要一一对应不可以多也不可以少 这么写会报错
// 缺少对象属性的定义
const ObjP:person = {
age:1,
name:'sdfs'
} // 这么写也会报错 超过了接口类型的定义
const ObjP1: person = {
age: 1,
name: 'sdfs',
sex:1,
h:1
} // 同样的数据类型不对应也会报错
正确的写法是,也就是一一对应
const ObjPOk: person = {
age: 1,
name: 'sdfs',
sex:1
}
那么如果后台返回的数据不确定,只能确定一些必然出现的数据怎么办,这个时候就可以采用可选属性来解决
如下
interface person1 {
name?: string, // 定义一个可循属性
age: number,
sex: number
}
// 这里省略了name 依然是正确的
const objKxL: person1 = {
age: 111,
sex: 1
}
那么如果返回的数据字段非常多怎么办,只知道几个固定,其他的字段都是不可控的,这个时候可以采用下面的方式
任意属性
// 任意属性定义方式
interface person2 {
name?: string, // 定义一个可循属性
age: number,
sex: number,
[prop:string]:any // 定义一个任意属性 类型是any 这个时候我们即使返回很多字段也不会报错 这里的“prop”可以随便定义成什么名字
} const obj2: person2 = {
age:1,
sex:1,
a:1,
b:'sdfsdfs'
}
如果我们希望返回的数据只能读,不可以去修改原始数据,这个时候就需要用到另外一个属性了,叫做只读属性
interface person3{
readonly id:string,
name?: string, // 定义一个可选属性
age: number,
sex: number,
[prop: string]: any // 定义一个任意属性 类型是any
} const obj3:person3 = {
id:'sdfsdfd',
age:1,
sex:1,
a:1
} obj3.id = 'fsdhfsdjfjhds'
那么接口如何制定函数呢,可以通过下列方式
interface person4 {
readonly id: string,
name?: string, // 定义一个可选属性
age: number,
sex: number,
cb: () => void, // 这里制定函数无返回值也就是默认空值返回
[prop: string]: any // 定义一个任意属性 类型是any
} const obj4:person4 = {
id:'111',
age:1,
sex:2,
cb:()=>{
console.log('1111');
},
a:111
}
下一节学习typescript 数组类型
typescript 接口和对象类型(四)的更多相关文章
- 四:python 对象类型详解一:数字(下)
一:位操作 除了一般的数学运算,python也支持c语言中的大多数数学表达式.这包括那些把整数当作二进制位串对待的操作.例如,还可以实现位移及布尔操作: >>> x = 1 > ...
- TypeScript 学习笔记 — 自定义类型:部分属性可选,反选 key,求对象交差并补集等(十三)
目录 将部分属性变为可选属性 根据值的类型 反选 key 写法一:基础原理写法,使用不同的内置类型,Pick 和 Omit 写法二:基础原理写法,使用 Pick 内置类型 + 传参的方式 写法三:使用 ...
- TypeScript完全解读(26课时)_12.TypeScript完全解读-高级类型(1)
12.TypeScript完全解读-高级类型(1) 高级类型中文网的地址:https://typescript.bootcss.com/advanced-types.html 创建新的测试文件 ind ...
- TypeScript完全解读(26课时)_13.TypeScript完全解读-高级类型(2)
13.TypeScript完全解读-高级类型(2) 高级类型中文网的地址:https://typescript.bootcss.com/advanced-types.html 创建文件并在index. ...
- 使用Typescript重构axios(二十四)——防御XSRF攻击
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
- 《三》大话 Typescript 接口
> 前言: 本文章为 TypeScript 系列文章. 旨在利用碎片时间快速入门 Typescript. 或重新温故 Typescript 查漏补缺.在官方 api 的基础上, 加上一些日常使用 ...
- JSP九大内置对象和四个作用域
JSP九大内置对象和四个作用域 在学习JSP的时候,首先就要先了解JSP的内置对象,什么是内置对象呢?内置对象也叫隐含对象,就是不需要预先声明就可以在脚本代码和表达式中随意使用.而这样的内置对象在JS ...
- JSP九大内置对象和四种属性范围解读
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:本文首先主要解说了JSP中四种属性范围的概念.用法与实例. 然后在这个基础之上又引入了九 ...
- HQL查询——查询返回对象类型分析
关于HQL查询,我们可以结合hibernate的API文档,重点围绕org.hibernate.Query接口,分析其方法,此接口的实例对象是通过通过session.对象的creatQuery(Str ...
- JAVA IO分析二:字节数组流、基本数据&对象类型的数据流、打印流
上一节,我们分析了常见的节点流(FileInputStream/FileOutputStream FileReader/FileWrite)和常见的处理流(BufferedInputStream/B ...
随机推荐
- vue grid layout 设定某组件为最低位,其它子item无法拖拽超过
逻辑: 设定某项X为底部 逻辑: for 循环获取最低位的item Y的信息:i 和 y 如果i != X.i initY = X.y 则调整X.y ...
- 鸿蒙(HarmonyOS)常见的三种弹窗方式
最近有一个想法,做一个针对鸿蒙官方API的工具箱项目,介绍常用的控件,以及在项目中如何使用,今天介绍Harmony中如何实现弹窗功能. 警告弹窗 警告弹窗是一个App中非常常用的弹窗,例如: 删除一条 ...
- 互联网医疗|基于音视频SDK和即时通讯IM技术实现线上问诊功能
近期,包括北上广深在内的国内多个城市相继推动线上医保购药试点,实施进展备受网民关注. 不止于线上买药,包括健康咨询.在线问诊在内的互联网医疗服务进一步满足了人们对便捷医疗服务的需求,得到了相关政策的积 ...
- 变“金点子”为“好应用”,合合信息智能文档处理技术助力大学生探索AI创新边界
谈"糖"色变.追求养生.低卡生活--这些热门词汇频频在社交媒体上掀起讨论热潮.有这样一批年轻人不但捕捉到了这些词汇背后真实的用户需求,并且正在利用AI技术寻找解决之道. 近日,&q ...
- 【倒计时3天】“CSIG企业行”走进合合信息,大咖解密智能文档处理背后的底层技术及AI未来展望
3月18日,由中国图象图形学会(CSIG)主办,合合信息.CSIG文档图像分析与识别专业委员会联合承办的"CSIG企业行"系列活动将正式举办,通过搭建学术界与企业交流合作平台,为企 ...
- 项目发布后项目时间和linux时间不一致
查阅了很多资料,本来总以为是项目的问题,启动前端,连接不同的后台,本地项目时间是正确的,部署到linux Docker容器就不行.很纳闷...... 基于以上,还是决定记下来,以便后来的人查阅,解决问 ...
- 祝福 Eric 的下一段旅程,Flutter 3.3 现已发布
Flutter 团队及社区成员们在美丽的城市挪威奥斯陆向您发来问候,我们正在此参加社区举办的 Flutter Vikings 活动,这是一个为期两天的开发技术交流盛会,虽然线下门票已经售罄,但您还可以 ...
- 构建数据大屏,塑造IT运维可视化核心竞争力
随着大数据.云计算等新兴技术的发展与运用,在金融.交通.教育.政府等行业的信息化在飞速发展.与此同时,各行业的IT建设与维护管理成本也在与日俱增,大量的运维工作下产生庞大的运维数据,如何进行运维数据可 ...
- USB gadget functionfs
FunctionFS (Function Filesystem) 是 Linux USB Gadget 框架的一部分,专门用于从用户空间实现和控制自定义的 USB 功能.它提供了一种文件系统接口,使用 ...
- Android libusb
一.环境:配置NDK环境 1.下载libusb源码: https://github.com/libusb/libusb/releases,如下图所示 2.删除一些和Android平台无关的文件,删除后 ...