前端TypeScript学习day03-TS高级类型

(创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹)

目录

TypeScript 高级类型

class 类

class继承?

extends

implements?

类成员可见性?

public?

protected?

private?

?readonly

兼容性

类型兼容性

接口兼容性?

函数兼容性?


TypeScript 高级类型

class 类

TypeScript 全面支持 ES2015 中引入的 class 关键字,并为其添加了类型注解和其他语法(比如,可见性修饰符等)

解释:

1. 根据 TS 中的类型推论,可以知道 Person 类的实例对象 p 的类型是 Person。

2. TS 中的 class,不仅提供了 class 的语法功能,也作为一种类型存在。

实例属性初始化:

解释:

1. 声明成员 age,类型为 number(没有初始值)。

2. 声明成员 gender,并设置初始值,此时,可省略类型注解(TS 类型推论 为 string 类型)。

构造函数:

解释:

1. 成员初始化(比如,age: number)后,才可以通过 this.age 来访问实例成员。

2. 需要为构造函数指定类型注解,否则会被隐式推断为 any; 构造函数不需要返回值类型 。

class继承

类继承的两种方式:1 extends (继承父类) 2 implements(实现接口)。

说明:JS 中只有 extends,而 implements 是 TS 提供的。

extends

解释:

1. 通过 extends 关键字实现 继承 。

2. 子类 Dog 继承父类 Animal,则 Dog 的实例对象 dog 就同时具有了父类 Animal 和 子类 Dog 的所有属性和方法。

class Animal {move() {console.log('走两步')}}class Dog extends Animal {name = '二哈'bark() {console.log('旺旺!')}}const d = new Dog()d.move()d.bark()console.log(d.name)
implements

解释:

1. 通过 implements 关键字让 class 实现接口。

2. Person 类实现接口 Singable 意味着,Person 类中必须提供 Singable 接口中指定的所有方法和属性。

interface Singale {sing(): voidname: string
}class Person implements Singale {name = 'jack'sing() {console.log('你是我的小呀小苹果')}
}

类成员可见性

类成员可见性:可以使用 TS 来 控制 class 的方法或属性对于 class 外的代码是否可见 。

可见性修饰符包括:1 public(公有的) 2 protected(受保护的) 3 private(私有的)

public

表示公有的、公开的, 公有成员可以被任何地方访问 ,默认可见性。

解释:

1. 在类属性或方法前面添加 public 关键字,来修饰该属性或方法是共有的。

2. 因为 public 是默认可见性,所以, 可以直接省略 。

protected

表示 受保护的 ,仅对其声明所在类和子类中(非实例对象)可见。

解释:

1. 在类属性或方法前面添加 protected 关键字,来修饰该属性或方法是受保护的。

2. 在子类的方法内部可以通过 this 来访问父类中受保护的成员,但是, 对实例不可见 !

private

表示 私有的 , 只在当前类中可见 ,对实例对象以及子类也是不可见的。

解释:

1. 在类属性或方法前面添加 private 关键字,来修饰该属性或方法是私有的。

2. 私有的属性或方法只在当前类中可见,对子类和实例对象也都是不可见的!

readonly

除了可见性修饰符之外,还有一个常见修饰符就是: readonly(只读修饰符) 。

readonly :表示 只读 , 用来防止在构造函数之外对属性进行赋值 。

解释:

1. 使用 readonly 关键字修饰该属性是只读的,注意 只能修饰属性不能修饰方法 。

2. 注意:属性 age 后面的类型注解(比如,此处的 number)如果不加,则 age 的类型为 18 (字面量类型)。

3. 接口或者 {} 表示的对象类型,也可以使用 readonly 。

兼容性

类型兼容性

两种类型系统:1 Structural Type System(结构化类型系统) 2 Nominal Type System(标明类型系统)。

TS 采用的是结构化类型系统 ,也叫做 duck typing(鸭子类型), 类型检查关注的是值所具有的形状 。

也就是说,在结构类型系统中,如果两个对象具有相同的形状,则认为它们属于同一类型。

解释:

1. Point 和 Point2D 是两个名称不同的类。

2. 变量 p 的类型被显示标注为 Point 类型,但是,它的值却是 Point2D 的实例,并且没有类型错误。

3. 因为 TS 是结构化类型系统,只检查 Point 和 Point2D 的结构是否相同(相同,都具有 x 和 y 两个属性,属性类型也相同)。

4. 但是,如果在 Nominal Type System 中(比如,C#、Java 等),它们是不同的类,类型无法兼容。

注意:在结构化类型系统中,如果两个对象具有相同的形状,则认为它们属于同一类型,这种说法并不准确。

更准确的说法:对于对象类型来说,y 的成员至少与 x 相同,则 x 兼容 y( 成员多的可以赋值给少的 ) 。

解释:

1. Point3D 的成员 至少 与 Point 相同,则 Point 兼容 Point3D。

2. 所以,成员多的 Point3D 可以赋值给成员少的 Point。

接口兼容性

接口之间的兼容性,类似于 class 。并且,class 和 interface 之间也可以兼容。

函数兼容性

函数之间兼容性比较复杂,需要考虑:1 参数个数 2 参数类型 3 返回值类型。

1. 参数个数,参数多的兼容参数少的(或者说,参数少的可以赋值给多的)。

解释:

1. 参数少的可以赋值给参数多的,所以,f1 可以赋值给 f2。

2. 数组 forEach 方法的第一个参数是回调函数,该示例中类型为:(value: string, index: number, array: string[]) => void。

3. 在 JS 中省略用不到的函数参数实际上是很常见的,这样的使用方式,促成了 TS 中函数类型之间的兼容性

4. 并且因为回调函数是有类型的,所以,TS 会自动推导出参数 item、index、array 的类型。

2. 参数类型,相同位置的参数类型要相同(原始类型)或兼容(对象类型)。

解释:函数类型 F2 兼容函数类型 F1,因为 F1 和 F2 的第一个参数类型相同。

解释:

1. 注意,此处与前面讲到的接口兼容性冲突。

2. 技巧: 将对象拆开,把每个属性看做一个个参数 ,则,参数少的(f2)可以赋值给参数多的(f3)

返回值类型,只关注返回值类型本身即可:

解释:

1. 如果返回值类型是原始类型,此时两个类型要相同,比如,左侧类型 F5 和 F6。

2. 如果返回值类型是对象类型,此时成员多的可以赋值给成员少的,比如,右侧类型 F7 和 F8。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/64713.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

pyQt5基本需求v1.0

TOC(需求界面) 1.主界面介绍 首先展示项目名称,几个文件上传按钮,滑动条,页面切换按钮,系统时间展示。 2.具体页面demo 2.下期预告 视频页面的各种逻辑展示,大家可以先思考一下

2024年12月陪玩系统-仿东郊到家约玩系统是一种新兴的线上预约线下社交、陪伴系统分享-优雅草央千澈-附带搭建教程

2024年12月陪玩系统-仿东郊到家约玩系统是一种新兴的线上预约线下社交、陪伴系统分享-优雅草央千澈-附带搭建教程 产品介绍 仿东郊到家约玩系统是一种新兴的线上预约,线下社交、陪伴、助娱、助攻、分享、解答、指导等服务模式,范围涉及电竞、运动、音乐…

Android Stduio 2024版本设置前进和后退按钮显示在主界面

Android Studio 2024(Ladybug)安装后发现前进和后退按钮不显示在主界面的工具栏,且以前在View中设置的办法无效: Android Studio 2024(Ladybug)的设置方式: File->Settings->Appearance&…

4、交换机IP接口功能

这一篇是讲端口的功能的,应该放在路由前面的,不过关联不大,就这个顺序也行 1、DHCP功能 作用:交换机端口的DHCP功能可以使网络中的设备(计算机、打印机等等)能够自动的获取IP地址或其它网络参数&#xff0…

Chapter 02 Python基础-1

1.Python语法 1.变量 从实例看Python代码: 输入圆的半径,计算圆面积,若面积大于等于10,则输出具体数值,若面积小于10,则只输出整数值。 分析: 1.圆面积计算需要用到PI,取什么样的…

Go web 开发框架 Iris

背景 掌握了 Go 语言的基础后就该开始实践了,编写Web应用首先需要一个 web 开发框架。做框架选型时,处理web请求是基本功能,至于MVC是更进一步需要。现在比较流行的web架构是前后端分离,后端响应RESTful的请求,Iris 能…

Python 助力 DBA:高效批量管理数据库服务器的多线程解决方案-多库查询汇总工具实现

批量数据库服务器连接测试与数据汇总:Python实现方案 作为数据库服务器运维人员,我们经常需要面对大量服务器的连接测试和数据汇总工作。本文将介绍一个使用Python实现的高效解决方案,可以帮助我们快速完成这些任务。 需求概述 从配置文件…

vue预览和下载 pdf、ppt、word、excel文档,文件类型为链接或者base64格式或者文件流,

** 方法1&#xff1a;word、xls、ppt、pdf 这些文件&#xff0c; 如果预览的文件是链接可以直接打开&#xff0c;可用微软官方的预览地址 ** <iframe width"100%" :src"textVisibleURl " id"myFramePPT" style"border: none;backgroun…

python elasticsearch_dsl PIT Point in time API 查询

默认情况下&#xff0c;搜索请求针对目标索引的最新可见数据&#xff08;称为时间点&#xff09;执行。elasticsearchpit&#xff08;时间点&#xff09;是一种轻量级视图&#xff0c;可以查看数据在启动时的状态。在某些情况下&#xff0c;最好使用同一时间点执行多个搜索请求…

OB删除1.5亿数据耗费2小时

目录 回顾&#xff1a;mysql是怎么删除数据的&#xff1f; 删除方案 代码实现 执行结果 结论 本篇是实际操作 批量处理数据以及线程池线程数设置 记录学习 背景&#xff1a;有一张用户标签表&#xff0c;存储数据量达4个亿&#xff0c;使用OceanBase存储&#xff0c;由于…

【2025最新计算机毕业设计】基于SSM框架的宠物领养系统【提供源码+答辩PPT+文档+项目部署】

作者简介&#xff1a;✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流。✌ 主要内容&#xff1a;&#x1f31f;Java项目、Python项目、前端项目、PHP、ASP.NET、人工智能…

【专题】2024抖音电商母婴行业分析报告汇总PDF洞察(附原数据表)

原文链接&#xff1a;https://tecdat.cn/?p38651 在数字化浪潮的席卷下&#xff0c;抖音电商母婴行业正经历着深刻变革。当下&#xff0c;年轻一代父母崛起&#xff0c;特别是 24 至 30 岁以及 18 至 23 岁的群体成为抖音母婴行业兴趣人群的主力军。他们带来全新育儿理念&…

免费开源!推荐一款网页版数据库管理工具!

免费开源&#xff01;推荐一款网页版数据库管理工具&#xff01; DBGate 是一个开源的数据库管理工具&#xff0c;DBGate 的最大特点是可以 Web 访问&#xff01;&#xff0c;轻松实现一台机器部署&#xff0c;所有人使用&#xff01; 无论是 MySQL、PostgreSQL、SQLite 还是…

使用 UniApp 在微信小程序中实现 SSE 流式响应

概述 服务端发送事件(Server-Sent Events, SSE)是一种允许服务器向客户端推送实时更新的技术。SSE 提供了一种单向的通信通道,服务器可以持续地向客户端发送数据,而不需要客户端频繁发起请求。这对于需要实时更新的应用场景非常有用。 流式传输的特点是将数据逐步传输给客…

【Java项目】基于SpringBoot的【旅游管理系统 】

【Java项目】基于SpringBoot的【旅游管理系统 】 技术简介&#xff1a;本系统使用JAVA语言开发&#xff0c;采用B/S架构、Spring Boot框架、MYSQL数据库进行开发设计。 系统简介&#xff1a;&#xff08;1&#xff09;管理员功能&#xff1a;可以管理个人中心、用户管理、景区分…

音频接口:PDM TDM128 TDM256

一、 PDM接口 在麦克风&#xff08;Mic&#xff09;接口中&#xff0c;PDM&#xff08;Pulse Density Modulation&#xff0c;脉冲密度调制&#xff09;和I2S&#xff08;Inter-IC Sound&#xff0c;集成电路内置音频总线&#xff09;是两种常见的数字输出接口。 1、工作原理…

【系统】Windows11更新解决办法,一键暂停

最近的windows更新整的我是措不及防&#xff0c;干啥都要关注一下更新的问题&#xff0c;有的时候还关不掉&#xff0c;我的强迫症就来了&#xff0c;非得关了你不可&#xff01; 经过了九九八十一难的研究之后&#xff0c;终于找到了一个算是比较靠谱的暂停更新的方法&#x…

Canoe E2E校验自定义Checksum算法

文章目录 一、添加 DBC文件二、导入要仿真的ECU节点三、编写 CAPL脚本1. 创建 .can 文件2. 设置counter递增3. 设置 CRC 算法&#xff0c;以profile01 8-bit SAE J1850 CRC校验为例 四、开始仿真五、运行结果CRC在线校验 当E2E的 CRC算法非常规算法&#xff0c;则需要自己编写代…

穷举vs暴搜vs深搜vs回溯vs剪枝系列一>找出所有子集的异或总和再求和

题目&#xff1a; 解析&#xff1a; 代码&#xff1a; private int ret;//返回周结果private int path;//枚举一个元素就异或进去public int subsetXORSum(int[] nums) {dfs(nums, 0);return ret;} private void dfs(int[] nums, int pos){ret path;for(int i pos; i <…

洛谷【贪心算法】P1803 学习笔记

2024-12-20 - 第 41 篇 洛谷贪心算法题单 - 贪心算法 - 学习笔记 作者(Author): 郑龙浩 / 仟濹(CSND账号名) P1803 凌乱的yyy / 线段覆盖 题目背景 快 noip 了&#xff0c;yyy 很紧张&#xff01; 题目描述 现在各大 oj 上有 n n n 个比赛&#xff0c;每个比赛的开始、结…