在typescript中,我们定义对象的方式要用关键字interface(接口),
使用interface来定义一种约束,让数据的结构满足约束的格式。定义方式如下:
 
// 定义一个接口类型
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 接口和对象类型(四)的更多相关文章

  1. 四:python 对象类型详解一:数字(下)

    一:位操作 除了一般的数学运算,python也支持c语言中的大多数数学表达式.这包括那些把整数当作二进制位串对待的操作.例如,还可以实现位移及布尔操作: >>> x = 1 > ...

  2. TypeScript 学习笔记 — 自定义类型:部分属性可选,反选 key,求对象交差并补集等(十三)

    目录 将部分属性变为可选属性 根据值的类型 反选 key 写法一:基础原理写法,使用不同的内置类型,Pick 和 Omit 写法二:基础原理写法,使用 Pick 内置类型 + 传参的方式 写法三:使用 ...

  3. TypeScript完全解读(26课时)_12.TypeScript完全解读-高级类型(1)

    12.TypeScript完全解读-高级类型(1) 高级类型中文网的地址:https://typescript.bootcss.com/advanced-types.html 创建新的测试文件 ind ...

  4. TypeScript完全解读(26课时)_13.TypeScript完全解读-高级类型(2)

    13.TypeScript完全解读-高级类型(2) 高级类型中文网的地址:https://typescript.bootcss.com/advanced-types.html 创建文件并在index. ...

  5. 使用Typescript重构axios(二十四)——防御XSRF攻击

    0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...

  6. 《三》大话 Typescript 接口

    > 前言: 本文章为 TypeScript 系列文章. 旨在利用碎片时间快速入门 Typescript. 或重新温故 Typescript 查漏补缺.在官方 api 的基础上, 加上一些日常使用 ...

  7. JSP九大内置对象和四个作用域

    JSP九大内置对象和四个作用域 在学习JSP的时候,首先就要先了解JSP的内置对象,什么是内置对象呢?内置对象也叫隐含对象,就是不需要预先声明就可以在脚本代码和表达式中随意使用.而这样的内置对象在JS ...

  8. JSP九大内置对象和四种属性范围解读

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:本文首先主要解说了JSP中四种属性范围的概念.用法与实例. 然后在这个基础之上又引入了九 ...

  9. HQL查询——查询返回对象类型分析

    关于HQL查询,我们可以结合hibernate的API文档,重点围绕org.hibernate.Query接口,分析其方法,此接口的实例对象是通过通过session.对象的creatQuery(Str ...

  10. JAVA IO分析二:字节数组流、基本数据&对象类型的数据流、打印流

    上一节,我们分析了常见的节点流(FileInputStream/FileOutputStream  FileReader/FileWrite)和常见的处理流(BufferedInputStream/B ...

随机推荐

  1. Vue使用v-for 循环生成tabs 标签页

    实现最终效果: template代码: activeName:默认第一个显示的tab <el-tabs v-model="activeName" type="car ...

  2. Docker容器常用操作命令(镜像的上传、下载、导入、导出、创建、删除、修改、启动等)详解

    1.docker镜像下载 docker pull [options] name [:tag@digest] name后边可以跟镜像标签或者镜像摘要(其实就是镜像的版本),如果不加任何东西,则会默认是在 ...

  3. 搭建MyBatis环境

    开发环境 idea .maven .MySQL.MyBatis MySQL不同版本的注意事项 1.驱动类driver-class-name MySQL 5版本使用jdbc5驱动,驱动类使用:com.m ...

  4. Coursera, Big Data 5, Graph Analytics for Big Data, Week 1/2

    Graph表示 1. adjacency matrix最简单的一种表示:行是From 列是To, 这种表示是稀疏矩阵 2. 另一种表示,如下图,很多graph数据库用这种,是的数据库操作更有效率 us ...

  5. OData – 大杂烩

    前言 本篇记入一些 OData 的小东西. Query string too long OData 使用 GET 请求,然后搭配 query string $filter, $select, $exp ...

  6. Azure – DNS

    前言 以往 DNS 都是用 Domain 公司免费提供的. 但这类 DNS 一般都不支持 API 访问. 这就会导致无法自动 renew Let's Encrypt wildcard SSL. 所以用 ...

  7. ASP.NET Core – Filter

    介绍 Filter 类似 Middleware,只是它集中在处理 request 的前后, 站 MVC 角度看就是 before 和 after action, 站 Razor Pages 角度就是 ...

  8. Naive UI 2.38.1

    https://www.naiveui.com/zh-CN/os-theme/docs/i18n 配置字体 Naive UI 可以和 vfonts 配合,你可以简单的引入 vfonts 中的字体,包含 ...

  9. Sketch Measure切图插件无法导出标注 (换插件绕过解决)

    环境 MacOS 10.15+ sketch版本 69.2 插件版本 2.8.1 遇到的问题 导出标注卡死 更新版本无解,到插件的github issue中找到解决方法 使用MeaXure插件,git ...

  10. kali安装和升级

    实验介绍: kali集成了世界上所有优秀的渗透测试工具 一:在VMware上安装 这里只详细介绍kali在VMware的安装,u盘和物理机上的安装不做详解 在kali官网下载kali镜像iso文件 下 ...