Typescript 的 class 类

介绍

1. 类介绍

传统的JavaScript通过函数和基于原型的继承来创建可重用的组件,从ES6开始,JavaScript程序员也可以使用面向对象的方法来创建对象。例如,下列通过class关键词,来声明了一个类:Greeter

class Greeter {greeting: string;constructor(message: string) {this.greeting = message;}greet() {return "Hello, " + this.greeting;}
}

通过使用new Greeter()可以创建很多个基于该Greeter类的实例。如let greeter = new Greeter("world");,就创建了一个该类的实例greeter。

2. 类继承

在基于类的程序设计中,一种最基本的模式是:允许通过继承来实现类的扩展。如下面的例子,我们首先定义了一个Animal的类,然后又定义了Dog类并扩展了Animal,此时通过Dog类创建的实例就自动继承了Animal中的方法和属性:

class Animal {move(distanceInMeters) {console.log(`Animal moved ${distanceInMeters}m.`)}
}class Dog extends Animal {bark() {console.log('Woof! Woof!')}
}const dog = new Dog()
dog.bark() // Woof! Woof!
dog.move(10) // Animal moved 10m.
dog.bark() // Woof! Woof!

Typescript的继承中一个最重要的关键字:super。例如下面的例子,我们首先定义了Animal类,然后使用extends关键词创建了Animal的两个子类:HorseSnake

class Animal {name: stringconstructor(theName: string) {this.name = theName}move(distanceInMeters: number = 0) {console.log(`${this.name} moved ${distanceInMeters}m.`)}
}
class Snake extends Animal {constructor(name: string) {super(name)}move(distanceInMeters = 5) {console.log('Slithering...')super.move(distanceInMeters)}
}
class Horse extends Animal {constructor(name: string) {super(name)}move(distanceInMeters = 45) {console.log('Galloping...')super.move(distanceInMeters)}
}let sam = new Snake('Sammy the Python')
let tom: Animal = new Horse('Tommy the Palomino')sam.move() // Slithering... Sammy the Python moved 5m.
tom.move(34) // Galloping... Tommy the Palomino moved 34m.

与前面不同的是:

  1. 派生类Snake和Horse都包含了一个构造函数,它必须调用super才行,它会执行基类里的构造函数。而且在构造函数里访问this属性之前,也一定要调用super——这是typescript强制执行的一条重要原则
  2. 该示例演示了如何重写父类的方法:Snake和Horse都创建了move方法,它们重写了冲Animal继承来的move方法,使得move在不同的类里有不同的功能。注意:即使tom被声明为Animal类,但因为它的值被声明为了Horse,调用.move方法时,还是执行的Horse里面的方法。

所以,上述方法中,调用sam.move()tom.move(34)的输出分别为:

sam.move()
// Slithering... 
// Sammy the Python moved 5m.tom.move(34)
// Galloping... 
// Tommy the Palomino moved 34m.

这是Typescript里面关于类的一个高级用法,在创建一些复杂类的时候可能会使用到,需要掌握。

3. 修饰符

3.1 public(默认)

在Typescript里,成员默认都是public,不过你开业可以将一个成员标记成明确的public类。如下面的示例:

class Animal {public name: stringpublic constructor(theName: string) {this.name = theName}public move(distanceInMeters: number = 0) {console.log(`${this.name} moved ${distanceInMeters}m.`)}
}

将Animal类里的属性全都标记成public,与前面不标记时的结果一样。

3.2 private

当成员被声明为private,它就不能被声明它的函数的外部访问。如:将Animal类中的name声明为private

class Animal {private name: stringpublic constructor(theName: string) {this.name = theName}
}

使用new Animal("Cat").name方法访问name就会报错,错误为:提示name是私有化属性。

3.3 protected

protectedprivate修饰符优点相似,不同的是:protected修饰符在派生类中也可以访问。如下图中,当我们在Person类中定义了protected类型的属性,在派生的howard示例中访问name,就会提示该属性是protectd无法被访问,而访问private类型的department则无提醒。
在这里插入图片描述
另外,构造函数也可以被声明为protected,这意味着这个类不能在包含它的类外被实例化,但是能被继承。

3.4 readonly

只读属性,必须在声明时或构造函数里被初始化。如:我们定义了readonly属性,就无法在实例里面赋值。
在这里插入图片描述

4. 存取器

存取器指的就是typescript的get/set方法,它可以方便我们修改类中的属性。如,下列代码定义了一个修改名称的方法,在修改名称时还验证了passcode是否正确,如果正确则修改成功,否则不做修改。

let passcode = 'secert passcode'
class Employee {private _fullName: stringget fullName(): string {return this._fullName}set fullName(newName: string) {if(passcode && passcode === 'secert passcode') {this._fullName = newName} else {console.log('Error: Unauthorized update of employee')}}
}

当我们创建一个基于Employee的实例,并且对它修改名称和获取名称:

let employee = new Employee()
employee.fullName = 'Bolb Smith'
if(employee.fullName) {alert(employee.fullName)
}

需要注意:

  • 存取器要求将编译器设置为输出ECMAScript 5或更高
  • 只带有get不带有set的存取器自动被推断为readonly
  • 使用存取器在从代码生成.d.ts文件时是有帮助的,因为利用这个属性的用户会看到不允许够改变它的值。

5. 静态属性

typescript除了可以定义实例属性,还可以定义静态属性。静态属性存在于类本身上面而不是类的实例上,如在下面的例子中,在我们使用static定义origin,因为它是所有网格都会用到的属性。 每个实例想要访问这个属性的时候,都要在origin前面加上类名。 如同在实例属性上使用this.前缀来访问属性一样,这里我们使用Grid.来访问静态属性。

class Grid {static origin = { x: 0, y: 0 }calculateDistanceFromOrigin(point: {x: number, y: number}) {let xDist = (point.x - Grid.origin.x)let yDist = (point.y - Grid.origin.y)return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale}constructor(public scale: number) {}
}let grid1 = new Grid(1.0) // 1x scale
let grid2 = new Grid(5.0) // 5x scaleconsole.log(grid1.calculateDistanceFromOrigin({x:10, y: 10}))
console.log(grid2.calculateDistanceFromOrigin({x:10, y: 10}))

6. 抽象类

抽象类通过关键词abstract来定义。抽象类中的抽象方法不包含具体实现而且必须在派生类中实现。如下列的代码,我们定义了一个抽象类,并且在派生中实现了抽象类中的方法:
在这里插入图片描述
可以看到:

  • 如果要继承抽象类,则抽象类中定义的方法一定要在实例中实现
  • 不能直接创建一个抽象类的实例
  • 声明成抽象类的实例,无法使用实例中的方法

高级技巧

1. 构造函数

在TypeScript里声明一个类的时候,实际上同时声明了很多东西。 首先就是类的实例的类型,如我们可以写let greeter: Greeter,这其实就是说Greeter类的实例的类型是Greeter。这个其实很好懂,了解JavaScript中的原型继承就能很好理解这个概念。

2. 把类当接口使用

如前所述,类定义会创建两个东西:类的实例类型和一个构造函数。 因为类可以创建出类型,所以你能够在允许使用接口的地方使用类。

class Point {x: numbery: number
}interface Point3d extends Point {z: number
}let point3d: Point3d = { x: 1, y: 2, z: 3 }

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

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

相关文章

SystemV共享内存

一、原理 申请:与共享库类似,OS先在共享区开辟/申请一段共享内存,然后通过页表映射,挂接到进程地址空间,返回这块内存的首地址,使得不同进程能访问同一份资源。 释放:去关联释放共享内存 一个进…

Java智慧工地SaaS管理平台源码:AI/云计算/物联网

智慧工地是指运用信息化手段,围绕施工过程管理,建立互联协同、智能生产、科学管理的施工项目信息化生态圈,并将此数据在虚拟现实环境下与物联网采集到的工程信息进行数据挖掘分析,提供过程趋势预测及专家预案,实现工程…

《网络协议》08. 概念补充

title: 《网络协议》08. 概念补充 date: 2022-10-06 18:33:04 updated: 2023-11-17 10:35:52 categories: 学习记录:网络协议 excerpt: 代理、VPN、CDN、网络爬虫、无线网络、缓存、Cookie & Session、RESTful。 comments: false tags: top_image: /images/back…

Vue3+Vite实现工程化,事件绑定以及修饰符

我们可以使用v-on来监听DOM事件,并在事件触发时执行对应的Vue的Javascript代码。 用法:v-on:click "handler" 或简写为 click "handler"vue中的事件名原生事件名去掉 on 前缀 如:onClick --> clickhandler的值可以是方法事件…

OpenCV图像处理、计算机视觉实战应用

OpenCV图像处理、计算机视觉实战应用 专栏简介一、基于差异模型模板匹配缺陷检测二、基于NCC多角度多目标匹配三、基于zxing多二维码识别四、基于tesseract OCR字符识别 专栏简介 基于OpenCV C分享一些图像处理、计算机视觉实战项目。不定期持续更新,干货满满&…

设置 wsl 桥接模式

一、环境要求 Win10/Win11 专业版&#xff0c;并已安装 Hyper-V 二、具体步骤 打开 Hyper-V 管理器 创建虚拟交换机 WSL Bridge 修改wsl配置文件 .wslconfig .wslconfig 文件所在路径如下&#xff1a; C:\Users\<UserName>\.wslconfig若 .wslconfig 文件不存在&am…

全面揭秘!微信传输助手的用处有哪些!

微信文件传输助手不是真人。它主要是通过服务器和网络技术来完成文件传输功能的。用户可通过微信文件传输助手实现文件在手机到电脑端的快速传输&#xff0c;而不需要其他有线设备。 微信文件传输助手是由微信官方提供的功能&#xff0c;主要用于文件的传输和保存。以下是其主要…

基于STC12C5A60S2系列1T 8051单片机的SPI总线器件数模芯片TLC5615实现数模转换应用

基于STC12C5A60S2系列1T 8051单片的SPI总线器件数模芯片TLC5615实现数模转换应用 STC12C5A60S2系列1T 8051单片机管脚图STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式及配置STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式介绍SPI总线器件数模芯片TLC5615介绍通过按…

数据结构与算法编程题5

从有序表中删除重复元素&#xff0c;使表中所有元素值均不相同。 #include <iostream> using namespace std;typedef int ElemType; #define Maxsize 100 #define OK 1 #define ERROR 0 typedef struct SqList {ElemType data[Maxsize];int length; }SqList;void Init_…

单链表相关面试题--2.反转一个单链表

/* 解题思路&#xff1a; 此题一般常用的方法有两种&#xff0c;三指针翻转法和头插法 1. 三指针翻转法记录连续的三个节点&#xff0c;原地修改节点指向 2. 头插法每一个节点都进行头插 */ // 三个指针翻转的思想完成逆置 struct ListNode* reverseList(struct ListNode* head…

python-opencv 培训课程笔记(1)

python-opencv 培训课程笔记&#xff08;1&#xff09; 博主参加了一次opencv库的培训课程&#xff0c;把课程所学整理成笔记&#xff0c;供大家学习&#xff0c;第一次课程包括如下内容&#xff1a; 1.读取图像 2.保存图像 3.使用opencv库显示图像 4.读取图像为灰度图像 …

PlayCover“模拟器”作弊解决方案

当下的游戏市场&#xff0c;移动游戏已占据了主导地位&#xff0c;但移动端游戏碍于屏幕大小影响操作、性能限制导致卡顿等因素&#xff0c;开始逐步支持多端互通。但仍有一些游戏存在移动端与 PC 端不互通、不支持 PC 端或没有 Mac 版本&#xff0c;导致 Mac 设备体验游戏不方…

【以图会意】操作系统的加载流程

声明&#xff1a;本图为博主方便自己记忆理解&#xff0c;诸多疏漏望请博友理性观看&#xff01;如有错误不足恳请指正。 首先&#xff0c;操作系统是一段程序&#xff0c;他保存在ROM中&#xff0c;在开机时&#xff0c;CPU被激活&#xff0c;首先将IR置为BIOS&#xff08;Bas…

《洛谷深入浅出基础篇》 图的基本应用

什么是图&#xff1f; 我们在生活中学习中能看见很多图&#xff0c;地图&#xff0c;路线图&#xff0c;思维导图等等&#xff0c;它们都有一个特点&#xff0c; 你从中任找一个点&#xff0c;你可以找到&#xff0c;从这个点出发&#xff0c;能够到达什么地方&#xff0c;也…

【C++历练之路】list的重要接口||底层逻辑的三个封装以及模拟实现

W...Y的主页 &#x1f60a; 代码仓库分享&#x1f495; &#x1f354;前言&#xff1a; 在C的世界中&#xff0c;有一种数据结构&#xff0c;它不仅像一个神奇的瑰宝匣&#xff0c;还像一位能够在数据的海洋中航行的智慧舵手。这就是C中的list&#xff0c;一个引人入胜的工具…

低代码平台全解析:衍生历程、优势呈现与未来趋势一览无余

在数字化时代&#xff0c;应用程序的开发与更新已成为企业保持竞争力的关键。传统的编码方式&#xff0c;虽然精细且功能强大&#xff0c;但耗时且要求开发者具备较高的技术水平。在这样的背景下&#xff0c;低代码开发平台的出现无疑为企业带来了福音。 低代码开发平台是一种创…

大数据-之LibrA数据库系统告警处理(ALM-12057 元数据未配置周期备份到第三方服务器的任务)

告警解释 系统安装完成后会检查元数据是否有周期备份到第三方服务器的任务&#xff0c;然后每1小时会检查一次。如果元数据未配置周期备份到第三方服务器的任务&#xff0c;将发送严重告警。 在用户创建元数据周期备份到第三方服务器的任务后&#xff0c;告警消除。 告警属性…

Redis ACL 规则说明

Redis ACL 规则说明 前情回顾ACL 定义规范启用和禁用用户允许和禁止调用命令允许或禁止访问某些 Key为用户配置有效密码 ACL 命令说明 前情回顾 上一篇文章 我们整体性的介绍了 Redis 的 ACL&#xff0c;我们来回顾下 ACL 的两种配置方式。 redis 使用 acl 有两种方式可以配置…

微服务 Spring Cloud 7,Nacos配置中心的Pull原理,附源码

目录 一、本地配置二、配置中心1、以Nacos为例&#xff1a;2、Pull模式3、也可以通过Nacos实现注册中心 三、配置中心提供了哪些功能四、如何操作配置中心1、配置注册2、配置反注册3、配置查看4、配置变更订阅 五、主流的微服务注册中心有哪些&#xff0c;如何选择&#xff1f;…

为何公司强调流程员工总是觉得反感?

在企业管理中&#xff0c;流程设计对于提高效率和降低风险至关重要。然而&#xff0c;很多企业在流程设计时常犯一些常见的错误&#xff0c;导致基层员工对流程感到烦扰&#xff0c;甚至产生抵触情绪。本文将通过分析一个企业的报销流程问题&#xff0c;探讨如何优化流程以提高…