TS(type,属性修饰符,抽象类,interface)一次性全部总结

目录

1.type

1.基本用法

2.联合类型

3.交叉类型

2.属性修饰符

1.public  属性修饰符

属性的简写形式

2.proteced  属性修饰符

3.private   属性修饰符

4.readonly  属性修饰符

3.抽象类

4.interface

1.定义类结构

2.定义对象结构

3.定义函数结构

4.接口之间的继承

5.接口自动合并

5. interface和type的区别

6. interface与抽象类的区别


1.type

type  可以为任意类型创建别名,让代码更简洁,可读性更强,同时能更方便的进行类型复用和扩展。

1.基本用法

type num = number;let price: num
price = 100

2.联合类型

type Status = number | string
type Gender = '男' | '⼥'function printStatus(status: Status) {console.log(status)
}function logGender(str: Gender) {console.log(str)
}printStatus(404)
printStatus('200')
printStatus('501')logGender('男')
logGender('⼥')

3.交叉类型

//⾯积
type Area = {height: number //⾼width: number //宽
}//地址
type Address = {num: number //楼号cell: number //单元号room: string //房间号
}// 定义类型House,且House是Area和Address组成的交叉类型
type House = Area & Addressconst house: House = {height: 180,width: 75,num: 6,cell: 3,room: '702'
}

2.属性修饰符

1.public  属性修饰符

class Person {// name写了public修饰符,age没写修饰符,最终都是public修饰符public name: stringage: numberconstructor(name: string, age: number) {this.name = namethis.age = age}speak() {// 类的【内部】可以访问public修饰的name和ageconsole.log(`我叫:${this.name},今年${this.age}岁`)}
}const p1 = new Person('张三', 18)
// 类的【外部】可以访问public修饰的属性
console.log(p1.name)
class Student extends Person {constructor(name: string, age: number) {super(name, age)}study() {// 【⼦类中】可以访问⽗类中public修饰的:name属性、age属性console.log(`${this.age}岁的${this.name}正在努⼒学习`)}
}
属性的简写形式
class Person {constructor(public name: string,public age: number) {}
}

2.proteced  属性修饰符

class Person {// name和age是受保护属性,不能在类外部访问,但可以在【类】与【⼦类】中访问constructor(protected name: string,protected age: number) {}// getDetails是受保护⽅法,不能在类外部访问,但可以在【类】与【⼦类】中访问protected getDetails(): string {// 类中能访问受保护的name和age属性return `我叫:${this.name},年龄是:${this.age}`}// introduce是公开⽅法,类、⼦类、类外部都能使⽤introduce() {// 类中能访问受保护的getDetails⽅法console.log(this.getDetails())}
}const p1 = new Person('杨超越', 18)
// 可以在类外部访问introduce
p1.introduce()// 以下代码均报错
// p1.getDetails()
// p1.name
// p1.age
class Student extends Person {constructor(name: string, age: number) {super(name, age)}study() {// ⼦类中可以访问introducethis.introduce()// ⼦类中可以访问nameconsole.log(`${this.name}正在努⼒学习`)}
}const s1 = new Student('tom', 17)
s1.introduce()

3.private   属性修饰符

class Person {constructor(public name: string,public age: number,// IDCard属性为私有的(private)属性,只能在【类内部】使⽤private IDCard: string) {}private getPrivateInfo() {// 类内部可以访问私有的(private)属性 —— IDCardreturn `身份证号码为:${this.IDCard}`}getInfo() {// 类内部可以访问受保护的(protected)属性 —— name和agereturn `我叫: ${this.name}, 今年刚满${this.age}岁`}getFullInfo() {// 类内部可以访问公开的getInfo⽅法,也可以访问私有的getPrivateInfo⽅法return this.getInfo() + ',' + this.getPrivateInfo()}
}const p1 = new Person('张三', 18, '110114198702034432')
console.log(p1.getFullInfo())
console.log(p1.getInfo())// 以下代码均报错
// p1.name
// p1.age
// p1.IDCard
// p1.getPrivateInfo()

4.readonly  属性修饰符

class Car {constructor(public readonly vin: string, //⻋辆识别码,为只读属性public readonly year: number, //出⼚年份,为只读属性public color: string,public sound: string) {}// 打印⻋辆信息displayInfo() {console.log(`识别码:${this.vin},出⼚年份:${this.year},颜⾊:${this.color},⾳响:${this.sound}`)}
}const car = new Car('1HGCM82633A123456', 2018, '⿊⾊', 'Bose⾳响')
car.displayInfo()
// 以下代码均错误:不能修改 readonly 属性
// car.vin = '897WYE87HA8SGDD8SDGHF';
// car.year = 2020;

3.抽象类

简记:抽象类不能被实例化,其意义是可以被继承,抽象类里可以有普通方法,也可以有抽象方法。

通过以下场景,理解抽象类:

我们定义一个抽象类Package,表示所有包裹的基本结构,任何包裹都有重量属性weight,包裹需要计算费用。但不同类型的包裹(如:标准速度,特快专递)都有不同的计算方式,因此用于计算费用的calculate方法是一个抽象方法,必须由具体的子类来实现。 

abstract class Package {constructor(public weight: number) {}// 抽象⽅法:⽤来计算运费,不同类型包裹有不同的计算⽅式abstract calculate(): number// 通⽤⽅法:打印包裹详情printPackage() {console.log(`包裹重量为: ${this.weight}kg,运费为: ${this.calculate()}元`)}
}
// 标准包裹
class StandardPackage extends Package {constructor(weight: number,public unitPrice: number // 每公⽄的固定费率) {super(weight)}// 实现抽象⽅法:计算运费calculate(): number {return this.weight * this.unitPrice}
}
// 创建标准包裹实例
const s1 = new StandardPackage(10, 5)
s1.printPackage()
class ExpressPackage extends Package {constructor(weight: number,private unitPrice: number, // 每公⽄的固定费率(快速包裹更⾼)private additional: number // 超出10kg以后的附加费) {super(weight)}// 实现抽象⽅法:计算运费calculate(): number {if (this.weight > 10) {// 超出10kg的部分,每公⽄多收additional对应的价格return 10 * this.unitPrice + (this.weight - 10) * this.additional} else {return this.weight * this.unitPrice}}
}
// 创建特快包裹实例
const e1 = new ExpressPackage(13, 8, 2)
e1.printPackage()

像是这样的形式我自己有自己的理解形式:

        好比如我们走路,起点都是一样的,终点也是一样的,唯独我们的过程是不一样的,有的骑车,有的走路等等,但是这多种方式我们就可以写成继承的方式,那么我们总共花费的时间就可以写在这个抽象类里面。 

4.interface

1.定义类结构

interface是一种定义结构的方式,主要作用是为:类,对象,函数等规定一种契约,这样可以确保代码的一致性和类型安全,但要注意interface只能定义格式,不能包含任何实现!

// PersonInterface接⼝,⽤与限制Person类的格式
interface PersonInterface {name: stringage: numberspeak(n: number): void
}
// 定义⼀个类 Person,实现 PersonInterface 接⼝
class Person implements PersonInterface {constructor(public name: string,public age: number) {}// 实现接⼝中的 speak ⽅法speak(n: number): void {for (let i = 0; i < n; i++) {// 打印出包含名字和年龄的问候语句console.log(`你好,我叫${this.name},我的年龄是${this.age}`)}}
}
// 创建⼀个 Person 类的实例 p1,传⼊名字 'tom' 和年龄 18
const p1 = new Person('tom', 18)
p1.speak(3)

2.定义对象结构

interface UserInterface {name: stringreadonly gender: string // 只读属性age?: number // 可选属性run: (n: number) => void
}
const user: UserInterface = {name: '张三',gender: '男',age: 18,run(n) {console.log(`奔跑了${n}⽶`)}
}

3.定义函数结构

interface CountInterface {(a: number, b: number): number
}
const count: CountInterface = (x, y) => {return x + y
}

4.接口之间的继承

interface PersonInterface {name: string // 姓名age: number // 年龄
}interface StudentInterface extends PersonInterface {grade: string // 年级
}const stu: StudentInterface = {name: '张三',age: 25,grade: '⾼三'
}

5.接口自动合并

// PersonInterface接⼝
interface PersonInterface {// 属性声明name: stringage: number
}// 给PersonInterface接⼝添加新属性
interface PersonInterface {// ⽅法声明speak(): void
}// Person类实现PersonInterface
class Person implements PersonInterface {name: stringage: number// 构造器constructor(name: string, age: number) {this.name = namethis.age = age}// ⽅法speak() {console.log('你好!我是⽼师:', this.name)}
}

5. interface和type的区别

  • 相同点:interfacetype都可以定义对象结构,在定义对象结构时两者可以互换。
  • 不同点:
    • interface:更专注于定义对象和类的结构,支持继承,合并。
    • type:可以定义类型别名,联合类型,交叉类型,但不支持继承和自动合并。

6. interface与抽象类的区别

  • 相同点:都能定义一个类的格式(定义类应遵循的契约)
  • 不同点:
    • 接口:只能描述结构,不能有任何代码实现,一个类可以实现多个接口
    • 抽象类:既可以包含抽象方法,也可以包含具体方法,一个类只能继承一个抽象类

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

客厅落地台灯怎么摆放?五款客厅落地台灯款式分享

客厅落地台灯怎么摆放&#xff1f;客厅落地台灯是提升光线环境在室内光线质量的关键设备。但如果不慎购买到低质量的客厅落地台灯&#xff0c;可能会导致光线效果不佳&#xff0c;进而影响视力健康。因此&#xff0c;挑选一个可靠的品牌至关重要。那么&#xff0c;客厅落地台灯…

数据治理006-数据标准的管理

元数据的分类和标准有哪些&#xff1f; 一、元数据的分类 元数据可以根据其描述的对象和属性不同&#xff0c;被分为不同的类型。以下是几种常见的元数据分类方法&#xff1a; 基于数据的类型&#xff1a;根据数据的类型&#xff0c;元数据可以被分为结构化元数据、非结构化元…

软件测试——Python和UnitTest框架

文章目录 一、软件测试1.测试计划和测试方案1.测试计划(管理类型文档)2.测试方案(技术型文档) 2.非功能测试设计3.测试报告1.核心内容 4.处理测试过程中出现不可复现的bug 二、Python1.常用语法1.切片2.字符串查找方法&#xff1a;find()3.字符串替换方法&#xff1a;replace()…

构建应用层(TCP)自定义协议:深入理解序列化与反序列化技术

&#x1f351;个人主页&#xff1a;Jupiter. &#x1f680; 所属专栏&#xff1a;Linux从入门到进阶 欢迎大家点赞收藏评论&#x1f60a; 目录 网络版计算器序列化 和 反序列化重新理解 read、write、recv、send 和 tcp 为什么支持全双工自定义协议期望的报文格式 模板方法模式…

开源大数据框架-Ambari+Bigtop如何写metainfo.xml文件

1.如何一键编译&#xff1f;一键安装&#xff1f;你没看错。 &#x1f449;&#x1f449;&#x1f449; https://gitee.com/tt-bigdata/ambari-env 你以为跟你闹着玩&#xff1f;人狠话不多&#x1f64d;‍♂️&#x1f64d;‍♂️&#x1f64d;‍♂️&#xff0c;直接上图&a…

国庆普及模拟2总结

目录 题目链接&#xff1a; 官方题解&#xff1a; 概述&#xff1a; 总结反思&#xff1a; 题目 T1: 题目分析&#xff1a; 错误代码&#xff1a; 错因&#xff1a; &#xff21;&#xff23;代码&#xff1a; T2&#xff1a; 题目分析&#xff1a; 赛时代码&#xf…

Centos Stream 9备份与恢复、实体小主机安装PVE系统、PVE安装Centos Stream 9

最近折腾小主机&#xff0c;搭建项目环境&#xff0c;记录相关步骤 数据无价&#xff0c;丢失难复 1. Centos Stream 9备份与恢复 1.1 系统备份 root权限用户执行进入根目录&#xff1a; cd /第一种方式备份命令&#xff1a; tar cvpzf backup.tgz / --exclude/proc --exclu…

CSS基础-常见属性

6、CSS三大特性 6.1 层叠性 如果样式发生冲突&#xff0c;则按照优先级进行覆盖。 6.2 继承性 元素自动继承其父元素、祖先元素所设置的某些元素&#xff0c;优先继承较近的元素。 6.3 优先级 6.3.1 简单分级 1、内联样式2、ID选择器3、类选择器/属性选择器4、标签名选择器/…

若无向图G(V,E)中含7个顶点,为保证图G在任何情况下都是连通的,则需要的边数最少是多少?

这乍一看是不是可抽象&#xff08;迷糊&#xff09;了&#xff0c;butttt待我小翻译一下。 先举少一点的例子&#xff0c;假如我们有三个点&#xff0c;我给你两条边&#xff0c;那是不是不管咋连都一定一定是连通的。 那我们再进一步&#xff0c;假如四个点呢&#xff1f;我给…

大厂进阶之CSS死磕牢记的7大知识点

本文主要讨论7大CSS知识点&#xff0c;个个都是金刚附体&#xff0c;干货满满&#xff1a; 1、移动端样式适配 2、回流和重绘 3、flex布局 4、BFC 5、CSS垂直居中方法 6、CSS两栏、三栏自适应布局 7、CSS单行、多行文本溢出省略号格式 一、如何做到移动端样式适配 1、媒体查询…

CloudCompare插件编写

预置环境&#xff1a;Windows10GitCMake3.23.3VS2019Qt5.14.2 编译CloudCompare工程 首先克隆CloudCompare工程&#xff0c;注意必须加上--recursive否则无法下载完整代码编译会失败&#xff1a; git clone --recursive https://github.com/CloudCompare/CloudCompare.git这…

鸢尾花书实践和知识记录[编程1-11二维和三维可视化]

作者空间 文章目录 思维导图函数使用 二维可视化方案平面散点图散点图的示例代码1&#xff1a;绘制鸢尾花的散点图代码2Plotly绘制散点图 数据类型和绘图工具的对应 平面等高线代码3生成等高线网格数据 plotly.express关键的绘图函数 Plotly的另一个模块代码4 Plotly生成的 热图…

李宏毅深度学习-梯度下降和Normalization归一化

Gradient Descent梯度下降 ▽ -> 梯度gradient -> vector向量 -> 下图中的红色箭头&#xff08;loss等高线的法线方向&#xff09; Tip1: Tuning your learning rates Adaptive Learning Rates自适应 通常lr会越来越小 Adaptive Learning Rates中每个参数都给它不同…

如何使用MethodChannel通信

文章目录 1 概念介绍2 实现方法3 经验总结我们在上一章回中介绍了Visibility组件相关的内容,本章回中将介绍Flutter与原生平台通信相关的内容.闲话休提,让我们一起Talk Flutter吧。 1 概念介绍 在移动开发领域以Android和IOS SDK开发出的应用程序叫原生开发,开发同一个程序…

Redis: Sentinel工作原理和故障迁移流程

Sentinel 哨兵几个核心概念 1 ) 定时任务 Sentinel 它是如何工作的&#xff0c;是如何感知到其他的 Sentinel 节点以及 Master/Slave节点的就是通过它的一系列定时任务来做到的&#xff0c;它内部有三个定时任务 第一个就是每一秒每个 Sentinel 对其他 Sentinel 和 Redis 节点…

【Canvas与徽章】金圈蓝底国庆75周年徽章

【成图】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>金边黑盾75周年</title><style type"text/css"&g…

万知:告别繁琐,轻松办公

零一万物这位科技创新的弄潮儿&#xff0c;带着它的最新杰作——万知&#xff0c;闪亮登场。这不仅仅是一个产品&#xff0c;它是对传统工作方式的一次轻松挑战。作为一款一站式AI问答、阅读和创作平台&#xff0c;万知旨在为用户提供高效、便捷的工作体验。万知通过集成多种智…

Suricata:开源网络分析和威胁检测

Suricata 是一款高性能、开源网络分析和威胁检测软件&#xff0c;被大多数私人和公共组织使用&#xff0c;并被主要供应商嵌入以保护他们的资产。 Suricata 功能 Suricata 提供全面的网络安全监控 (NSM) 功能&#xff0c;包括记录 HTTP 请求、捕获和存储 TLS 证书以及从网络流…

关于Vben Admin多标签页面缓存不生效的问题

情况说明 笔者在接手一个基于Vben Admin框架改造的vue3后台管理项目&#xff0c;客户要求在切换头部Tab页面时&#xff0c;不要刷新清空已经填写的表单页面或者表格。 然而&#xff0c;笔者根据Vben Admin的官方文档来配置多标签页面缓存后&#xff0c;页面每次切换后&#x…

光通信——FTTx

目录 FTTH模式 FTTO模式 FTTR模式 FTTB/CLAN/xDSL模式 FTTCabxDSL模式 根据接入光纤到用户的距离分类&#xff0c;PON可应用于光纤到交接箱&#xff08;FTTCab&#xff09;、光纤到大楼/路边&#xff08;FTTB/C&#xff09;、光纤到办公室&#xff08;FTTO&#xff0…