TypeScript学习(四):对象的定义及使用

2023-10-26

前面我们说到了数据类型,像什么布尔类型,数值类型,字符串类型等等,在开发中,我们还会遇到很多像对象、数组、函数等类型,那么在typescript中是怎么定义这些类型的?

对象(object)

我们先介绍下在JavaScript中式怎么定义对象的,在我之前的博客中有提到关于原型链的理解,那里面有对于对象的构造函数-实例对象-原型对象的一个介绍(浅谈我对原型链的理解),这里我再简单说一下,在JavaScript中我们定义对象方式如下:

var person = {
  name: 'zhangsan',
  age: 18,
  sayName: function () {
    console.log(this.name)
  }
}

可以看到我们创建了一个人物对象,包含人物的姓名,年龄及行为,并且在JavaScript中我们可以随意调用该人物的属性以及随意添加任务新属性,例如:

console.log(person.name);       // 获取人物的姓名
console.log(person.age);        // 获取人物的年龄
console.log(person.sayName());  // 调用人物的行为

person.gender = 'male';         // 给人物添加新的性别属性

那么在typescript中我们是如何定义对象呢?又是如何获取对象中的属性和定义新的属性呢?

在typescript中,我们定义对象的方式要用到接口,即Interfaces(接口),定义方式如下:

// 我们先定义一个对象的属性,需要注意的是我们使用接口interface定义对象时,接口的首字母最好是大写
interface Person {
    name : string ,
    age: number
}

我们刚刚定义了一个Person类型的对象,它包含姓名(值类型为字符串类型)和年龄(值类型为数值类型),我们使用方式如下:

let zhangsan : Person {
    name : 'zhangsan',
    age : 25
}

可以看到,我们定义了一个变量zhangsan,给他定义一个我们创建好的Person类型,同时给属性name和age赋值,这样定义和使用是没有任何问题的,但是,typescript中,我们定义和使用对象属性时需要注意以下几种情况:

(1)使用的类型与定义的类型不一致,例如缺少属性或者新增属性,在typescript中是不允许的,如下:

interface Person {
    name : string ,
    age: number
}

// 缺省属性
let zhangsan : Person {
    name : 'zhangsan'
};

// 新增属性
let zhangsan : Person {
    name : 'zhangsan',
    age : 25,
    weight : 75
};

以上两种情况下,编译均会报错,所以我们可以得知,在typescript中使用的类型与定义的类型必须保持一致,属性不能多也不能少。

但是,这样很不方便,因为我们不知道定义的变量在实际开发中会附上哪些属性,所以typescript中提供了一种方法,也就是任意属性,如下:

interface Person {
    name : string , 
    [propName: string] : any;
}
let zhangsan : Person {
    name : 'zhangsan',
    gender : 'male' 
};

上面我们定义了一个任意属性,而且编译没有报错,证明我们的代码是没有问题的,不过,这里的任意属性的定义,还有一个值得注意的地方,先看代码:

interface Person {
    name : string , 
    age : number ,
    [propName: string] : any;
}
let zhangsan : Person {
    name : 'zhangsan',
    age : 25 ,
    gender : 'male' 
};

这时候你运行代码,会发现报错了:'Property 'age' of type 'number' is not assignable to string index type 'string'.',这报错的意思,我们从字面理解的话就是:'类型为“number”的属性“age”不能分配给字符串索引类型“string”。',我们再深入理解,也就是属性age的number属性不是string类型的子属性。这样就很奇怪了,为什么会报这个错误?

我们可以看下官方文档,原来如果我们在定义接口对象时定义了任意属性,那么这个接口对象内其余的属性就必须是任意属性的子属性,因为我们定义了一个age属性,它的类型是number类型的,而number类型不是string类型以及它的子类型,所以编译时就报错了。

(2)有的类型我们可能用不上,不想去定义,例如性别分为男女,但是还有外星人(当然这里只是调侃一下),这个时候我们不需要性别属性,我们该如何定义?如下:

interface Person {
    name : string ,
    age: number ,
    gender ? : string
}

let zhangsan : Person {
    name : 'zhangsan' ,
    age : 25
}

可以看到,我们并没有使用Person接口对象内的gender属性,但是编译的时候也没有报错,也就是说gender属性在使用时可有可无。

(3)只可读属性,如下:

interface Person {
    name : string ,
    age : number ,
    readonly id: number
}

在这里我们定义了Person接口对象的属性id为只可读属性,所以我们在初始化变量后,就不能再更改此属性,例如:

interface Person {
    name : string ,
    age : number ,
    readonly id: number
}

let zhangsan: Person = {
    name: 'Tom' ,
    age: 25 ,
    id: 1
};

zhangsan.id = 2;   // 编译报错:Cannot assign to 'id' because it is a constant or a read-only property.

这里需要注意一个地方,我们在定义只可读属性时,约束存在于第一次给对象赋值的时候,也是说约束存在于第一次let zhangsan : Person中,而单独赋值(zhangsan.xxxxx)时是不允许的。

 

 

到底啦!!!!!!!!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

TypeScript学习(四):对象的定义及使用 的相关文章

随机推荐

  • 数据结构学习笔记----排序

    排序 就是要整理表中的元素 使之按关键字递增 或递减 有序排列 如果待排序的表中 存在有多个关键字相同的元素 经过排序后这些具有相同关键字的元素之间的相对 次序保持不变 则称这种 排序算法是稳定的 在排序过程中 若整个表都是放在内存中处理
  • Java8 Stream 之groupingBy 分组讲解

    本文主要讲解 Java 8 Stream之Collectors groupingBy 分组示例 Collectors groupingBy 分组之常见用法 功能代码 使用java8 stream groupingBy操作 按城市分组list
  • day5 qt

    include widget h include ui widget h Widget Widget QWidget parent QWidget parent ui new Ui Widget ui gt setupUi this tim
  • 计算机无法识别荣耀9,华为荣耀9连接不上电脑端华为手机助手怎么处理?

    如果手机无法连接华为手机助手 可通过以下步骤来尝试解决 步骤一 请确认USB线连接是否正常 若手机通知栏中没有显示USB已连接的提示 则可能是USB线连接不正常 手机能充电不能说明USB线是完全连接正常 比如部分USB线仅支持充电不支持数据
  • 独家

    随机森林 概述 当变量的数量非常庞大时 你将采取什么方法来处理数据 通常情况下 当问题非常庞杂时 我们需要一群专家而不是一个专家来解决问题 例如Linux 它是一个非常复杂的系统 因此需要成百上千的专家来搭建 以此类推 我们能否将许多专家的
  • 将线程pid转成16进制_如何使用jstack分析线程状态

    背景 记得前段时间 同事说他们测试环境的服务器cpu使用率一直处于100 本地又没有什么接口调用 为什么会这样 cpu使用率居高不下 自然是有某些线程一直占用着cpu资源 那又如何查看占用cpu较高的线程 当然一个正常的程序员不会写出上述代
  • Spring Cloud中的Ribbon的实现和使用

    Spring Cloud Ribbon 是 Spring Cloud 生态系统中的一个负载均衡客户端 它可以轻松地与其他 Spring Cloud 组件集成 提供负载均衡的方式来访问后端服务 下面介绍 Spring Cloud Ribbon
  • 如何进行远程调试(remote debug)。

    场景 scenario 本地机器 A 重现不了问题 其他机器或其他系统 B 可以重现问题 而重现问题的机器没有装VS调试工具 在开发本地机器中拷贝远程调试工具 以VS 2015 为例 将C Program Files x86 Microso
  • yum错误:Invalid configuration value: failovermethod=priority in /etc/yum.repos.d/CentOS-Epel.repo;

    错误描述 yum install y yum utils device mapper persistent data lvm2 Invalid configuration value failovermethod priority in e
  • 解析优化机器人课程体系与教学策略

    依据 基础教育信息技术课程标准 制定机器人教育课程标准 将机器人教育课程纳入新的课程体系 对现有机器人教育教材进行重新规划和修订 提高机器人教育在中小学阶段课时的比例 同时保证实践课的课时比例 加强学生的动手能力 保证教学质量 除此 还要保
  • 请尽快报名参加Imagine Cup 微软“创新杯”全球学生大赛

    微软Imagine Cup 2013大赛报名即将截止 截止报名时间是2013年1月31日 请各大高校抓紧时间报名参加 CSDN高校俱乐部校区将选出1个校区一等奖 10个校区二等奖 校区一等奖可直接参加中国区半决赛 团队成员还可获得CSDN高
  • VS构建项目报错信息及解决办法04

    报错信息及解决7 报错信息详情 error LNK2001 无法解析的外部符号 symbol 原因 编译后的代码引用或调用符号 该符号未在链接器搜索的任何库或对象文件中定义 什么是未解析的外部符号 符号 是函数或全局变量的内部名称 它是在已
  • 【算法】最优服务次序问题(贪心算法)

    设有n 个顾客同时等待一项服务 顾客i需要的服务时间为 t i 1 lt i lt n 应如何安排n个顾客的服务次序才能使平均等待时间达到最小 平均等待时间是n 个顾客等待服务时间的总和除以n 输入格式 第一行是正整数n 1
  • 归档的概念和用法

    归档的概念和用法 概念 对象归档是指将对象写入文件保存在硬盘的文件内 当在次打开程序时 可以还原这些对象 也可以称为对象序列化 对象持外化 数据持久化的方式 1 gt NSKeyedArchiver 对象归档 2 gt NSUserDefa
  • 回味2022

    回味2022 1 前言 2 过去的十二个月 3 我期望的2023 1 前言 2021年写给自己的总结 回味2021 一年又一年飞逝的光阴 我想唯有时间留给人的印象最为深刻吧 春去秋来 四季轮回间都是时光的印记 2022年12月30日 25岁
  • pycocotools报错 if type(resFile) == str or type(resFile) == unicode: NameError: name ‘unicode‘ is

    Q pycocotools报错 if type resFile str or type resFile unicode NameError name unicode is not defined A pycocotools与python版本
  • Springboot定义Controller接口的这些方式你肯定不知道

    环境 Springboot2 4 11 概述 当一个请求过来后Spring是如何进行处理的 下面简单的罗列下请个的过程中核心组件 SpringMVC处理的流程 DispatcherServlet 所有请求的入口 HandlerMapping
  • unity获取子物体个数、获取别的脚本的参数、获取脚本名、查找显示的物体、物体的显示和隐藏

    获取子物体个数 我有这么一个层级 我要获取levelSelectPanel里的levelSelectButton个数 于是 在脚本里先定义一个GameObject 用于接受面板输入进来的levelSelectPanel是哪一个 public
  • Python+Vue计算机毕业设计Vue的小区物业管理网站gb99s(源码+程序+LW+部署)

    该项目含有源码 文档 程序 数据库 配套开发软件 软件安装教程 项目运行环境配置 Python3 7 7 Django Mysql5 7 pip list HBuilderX Vscode也行 Vue Pychram社区版 项目技术 Dja
  • TypeScript学习(四):对象的定义及使用

    前面我们说到了数据类型 像什么布尔类型 数值类型 字符串类型等等 在开发中 我们还会遇到很多像对象 数组 函数等类型 那么在typescript中是怎么定义这些类型的 对象 object 我们先介绍下在JavaScript中式怎么定义对象的