在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. Chrome 开启多线程下载

    打开 chrome://flags/#enable-parallel-downloading,将 Parallel downloading 设置为 Enabled 参考:为什么Chrome浏览器下载速 ...

  2. Chrome 浏览器远程调试 【转】

    Chrome 浏览器按F12,可以调试JS,分析HTTP包等.但是有时候需要远程调试. 比如,某个EXE它内部嵌套了浏览器的话,可以想办法打开它的远程调试功能,然后在外部连到这个地址,就能分析它的ht ...

  3. HTML & CSS – Styling Scrollbar

    前言 Scrollbar 能 styling 的东西不多 (尤其是 IOS 基本上只能 display:none 而已),但有时候我们不得不 styling. 这里记入我自己在项目中修改过的 scro ...

  4. Google Analytics & Ads 学习笔记 2 (gtag 版本)

    gtag 是用来取代之前的 ga 的 但其实它底层就是调用 ga 而已. 只是封装了一个上层. 1. start up script <script async src="https: ...

  5. SQL Server CTE (Common Table Expression) 公用表表达式

    参考: Sql - CTE公用表表达式和With用法总结 YouTube – SQL WITH Clause | How to write SQL Queries using WITH Clause ...

  6. c++中的读写锁

    读写锁是一种特殊的锁机制,允许多个线程同时读取共享数据,但在写入共享数据时,只有一个线程可以进行写操作,其他线程必须等待. 这种机制对于读多写少的场景非常有效,可以提高并发性能.以下是通过 share ...

  7. Android Qcom USB Driver学习(三)

    usb hub区分端口 USB 子系统拓扑浅析 USB ID Database VendorID and ProductID usb usb1: New USB device found, idVen ...

  8. 共124篇!墨天轮“高可用架构”干货文档分享(含Oracle、MySQL、PG)

    大家期待的高可用篇来啦!在上期<墨天轮高分技术文档分享-Oracle升级迁移篇>中大家对数据库高可用架构相关文档呼声较高,这不就来啦! 数据库的高可用架构能够在发生宕机或意外中断等故障时起 ...

  9. threejs渲染基础的3D场景

    // 创建一个场景对象 let scene = new THREE.Scene(); // 创建一个相机对象 let camera = new THREE.PerspectiveCamera(75, ...

  10. python数据结构学习第一章——栈

    在这片文章中,我们使用python3.8自制一个具有基本功能的栈结构,它的功能只有push,pop,peek这三个功能 ` #!/usr/bin/env python # * coding: utf- ...