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.rhkb.cn/news/198775.html

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

相关文章

所有做海外营销的,都应该知道什么是SocialSelling

#01 社媒社交营销,早已不是选择题 当下,一个共同的认识已越来越深刻,不管是跨境电商还是外贸,又或者是海外实体店、APP出海、SaaS出海、金融出海等不同业态,社媒和社交营销已是所有企业的共识。 社媒社交营销&#xf…

使用drawio的图层构建更强大的图表

drawio中使用图层 drawio是一款强大的图表绘制软件,支持在线云端版本以及windows, macOS, linux安装版。 如果想在线直接使用,则直接输入网址draw.io或者使用drawon(桌案), drawon.cnhttps://www.drawon.cn?useSourcecsdn内部完整的集成了drawio的所有功…

信息中心网络提出的背景、研究现状及研究内容

信息中心网络什么时候提出的?未来发展前景?有什么著名实验室在做? 1、提出背景: 互联网产生于上世纪60年代: (1)网络设备数量呈指数性增长 截至2022年底全球范围内预计将有超过280亿台终端设…

「项目阅读系列」go-gin-example star 6.5k!(1)

文章目录 准备工作适宜人群项目信息 项目结构代码阅读主要模块代码主函数模块router 路由模块auth 授权模块数据库 修改文章请求分析其他依赖 总结 准备工作 适宜人群 初学 go 语法,希望了解 go 项目的构建过程和方式。 项目信息 go-gin-example 项目是使用 gin…

JUnit 单元自动化

一、Junit 是什么? Junit 是 Java 中用于单元测试的框架。使用 Junit 能让我们快速高效的完成单元测试。 自动化测试:JUnit提供了自动化测试的能力,开发人员可以编写一次测试用例,然后通过简单的命令或集成到持续集成工具中进行…

100套Axure RP大数据可视化大屏模板及通用组件库

106套Axure RP大数据可视化大屏模板包括了多种实用美观的可视化组件库及行业模板库,行业模板涵盖:金融、教育、医疗、政府、交通、制造等多个行业提供设计参考。 随着大数据的发展,可视化大屏在各行各业得到越来越广泛的应用。可视化大屏不再…

移动端表格分页uni-app

使用uni-app提供的uni-table表格 网址&#xff1a;https://uniapp.dcloud.net.cn/component/uniui/uni-table.html#%E4%BB%8B%E7%BB%8D <uni-table ref"table" :loading"loading" border stripe type"selection" emptyText"暂无更多数据…

分享职业技术培训类型

职业技术培训类型包括&#xff1a;Python技术应用、人工智能应机器学习、大数据分析、机器学习。 一、“Python技术应用工程师” “Python技术应用工程师”职业技术认证是由工业和信息化部教育与考试中心推出一套专业化、科学化、系统化的人才考核标准&#xff0c;涉及在互…

剪辑视频怎么把说话声音转成文字?

短视频已然成为了一种生活潮流&#xff0c;我们每天都在浏览各种短视频&#xff0c;或者用视频的形式记录生活&#xff0c;在制作视频的时候&#xff0c;字幕是一个很大的问题&#xff0c;给视频添加字幕可以更直观、更方便浏览。手动添加太费时间&#xff0c;下面就给大家分享…

设计模式(5)-使用设计模式实现简易版springIoc

自定义简易版springIoc 1 spring使用回顾 自定义spring框架前&#xff0c;先回顾一下spring框架的使用&#xff0c;从而分析spring的核心&#xff0c;并对核心功能进行模拟。 数据访问层。定义UserDao接口及其子实现类 public interface UserDao {public void add(); }public…

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

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

15.ORACLE11g的归档方式和日志文件的相关操作

ORACLE11g的归档方式和日志文件的相关操作 一、什么是日志文件1、在线日志文件2、归档日志文件 二、Oracle 11g 归档方式&#xff1a;1、归档方式状态2、归档日志方式下数据库的工作原理3、配置归档日志方式3.1 开启归档模式3.2 日志文件相关操作&#xff1a; 4、oracle11g联机…

【图像分类】【深度学习】【Pytorch版本】GoogLeNet(InceptionV4)模型算法详解

【图像分类】【深度学习】【Pytorch版本】GoogLeNet(InceptionV4)模型算法详解 文章目录 【图像分类】【深度学习】【Pytorch版本】GoogLeNet(InceptionV4)模型算法详解前言GoogLeNet(InceptionV4)讲解Stem结构Inception-A结构Inception- B结构Inception-C结构redution-A结构re…

2024年山东省职业院校技能大赛中职组 “网络安全”赛项竞赛试题-A卷

2024年山东省职业院校技能大赛中职组 “网络安全”赛项竞赛试题-A卷 2024年山东省职业院校技能大赛中职组 “网络安全”赛项竞赛试题-A卷A模块基础设施设置/安全加固&#xff08;200分&#xff09;A-1&#xff1a;登录安全加固&#xff08;Windows, Linux&#xff09;A-2&#…

大力说企微入门系列第二课:搭建体系

对于大部分人来说&#xff0c;学习有三动&#xff1a; 学习之前非常激动&#xff1b; 学习时候非常感动&#xff1b;学习之后是一动不动&#xff1b; 不知道大家看了上一课的《大力说企微入门系列第一课&#xff1a;企业微信的注册验证和认证》之后&#xff0c;是一动不动还是…

java基础练习缺少项目?看这篇文章就够了(下)!

公众号&#xff1a;全干开发 。 专注分享简洁但高质量的动图技术文章&#xff01; 回顾 在上节内容中&#xff0c;我们实现了用户开户的功能createAccount public void start(){System.out.println("欢迎您进入到了ATM系统");System.out.println("1、用户登录&…

基于JavaWeb的智慧停车管理系统设计与实现

项目描述 临近学期结束&#xff0c;还是毕业设计&#xff0c;你还在做java程序网络编程&#xff0c;期末作业&#xff0c;老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。你想解决的问题&#xff0c;今天给大家介绍…

2024年测试工程师必看系列之fiddler设置手机端抓包全套教程

fiddler设置手机端抓包 安卓手机抓包 第一步&#xff1a;配置电脑和安卓的相关设置 1、手机和fiddler位于同一个局域网内&#xff1b;首先从fiddler处获取到ip地址和端口号&#xff1a; &#xff0c;点击online&#xff0c;最后一行就是ip地址 2、路径&#xff1a;Tools》Op…

(动手学习深度学习)第13章 计算机视觉---微调

文章目录 微调总结 微调代码实现 微调 总结 微调通过使用在大数据上的恶道的预训练好的模型来初始化模型权重来完成提升精度。预训练模型质量很重要微调通常速度更快、精确度更高 微调代码实现 导入相关库 %matplotlib inline import os import torch import torchvision f…

Linux网络——HTTP

目录 一.应用层 二.认识URL 1.域名 2.urlencode和urldecode 三.HTTP协议格式 1.请求格式http 2.响应格式 四.HTTP响应状态码 五.HTTP常见Header 六.简单的HTTP服务器 七.HTTP的方法 1.GET方法 2.POST方法 一.应用层 我们程序员写的一个个解决我们实际问题, 满足…