当前位置: 首页 > news >正文

【TypeScript】中定义与使用 Class 类的解读理解

在这里插入图片描述

目录

    • `类的概念`
    • `类的继承` :
    • `类的存取器`:
    • `类的静态方法与静态属性`:
    • `类的修饰符`:
    • 参数属性:
    • `抽象类`:
    • `类的类型`:
  • 总结:

类的概念

类是用于创建对象的模板。他们用代码封装数据以处理该数据。JavaScript 中的类建立在原型上,但也具有某些语法和语义未与 ES5 类相似语义共享。


TypeScript 除了实现了所有 ES6 中的类的功能以外,还添加了一些新的用法。

关于ES6的 Class 类语法概念,在本章节不做过多阐述,感兴趣的的小伙伴 可以 点击这里,了解查看更多 ES6中有关Class的语法概念使用。

本章节还是主要给大家带来,在 TypeScript 中,如何去定义 Class 【类】,以及如何去使用 类身上的 属性及方法。

定义Class : 使用 Class 定义类,使用 constructor 定义构造函数。

在原生 JavaScript

class Rectangle {constructor(height, width) {this.height = height;this.width = width;}
}
new Rectangle(1, 2)   //实例化,并传入参数

上面的是,在JS中,Class 类的常用定义方式。

而在TypeScript 中定义 Class 类:

class identity {name: string;   //TS 中需要对要接受的参数初始化age: number;constructor(name: string, age: number) {    //为要传入的参数指定类型。不指定类型,默认为Any 类型。this.name = name;this.age = age;}sayHi() {return `我叫 ${this.name},今年${this.age}`;}
}
let a = new identity('张三', 20);
console.log(a);    //Animal {name: '张三', age: 20}console.log(a.sayHi());  //我叫 张三,今年20岁

类的继承

使用 extends 关键字实现继承,子类中使用 super() 关键字来调用父类的构造函数和方法。

class identity {   //父类name: string;age: number;constructor(name: string, age: number) {this.name = name;this.age = age;}sayHi() {return `我叫 ${this.name},今年${this.age}`;}
}//子类
class copy extends identity {   //由于我继承了 identity ,在 identity 身上已经存在了 name 和 age// 所以 在 copy 类里面就不用再定义 name 和 age了,继承后可以直接读取到,所继承类身上的属性方法。constructor(name: string, age: number) {super(name, age)              // super 继承}
}
let c = new copy("李四", 30) //实例化子类
console.log(c);  //copy {name: '李四', age: 30}//可以调用父类身上的方法。
console.log(c.sayHi());   //我叫 李四,今年30岁

类的存取器

使用 getter 和 setter 可以改变属性的赋值和读取行为。

存取器的作用:可以用来更专注化的控制对,对象属性方法的读取和修改。

class identity {   //父类name: string;age: number;constructor(name: string, age: number) {this.name = name;this.age = age;}//设置读取器=》,用来读取数据get names() {return "getter" + `我叫 ${this.name},今年${this.age}`;}//设置存储器,用来修改数据set names(val: string) {console.log("这是set 传入进来的值", val);}
}let a = new identity("张三", 18);
console.log(a.names);  //当我们访问读取器的时候会触发get,会直接得到返回的值 : getter张三18
a.names = "李四" //当我们为存储器赋值的时候,会触发 set 并且会把,赋值,当成参数,传递给 set。

使用 存储器的好处:对属性方法的读取和修改,更加的专业化,不同的存取器,负责不同的逻辑处理,这里的存取器,也相似于 Vue 中的 computed 计算属性。 以及 Object.defineProperty()的 get 和 set 方法 类似。


类的静态方法与静态属性

有时候,我们希望 类中所定义的属性或者方法,不想被实例化后的对象读取,不需要实例化,那么,我们就可以通过 static 关键字,来把 属性或方法定义为静态成员来实现。

class identity {static username: string = "asdasd";    //将 username  通过 static 设置为静态属性。并为其赋值。name: stringage: number;constructor(name: string, age: number) {this.name = name;this.age = age;console.log(this.username);  //也会报错,类的内部也不能拿取 username}//将方法设置为 静态方法static bolkfn() {console.log("静态方法");}
}let a = new identity("张三", 18);console.log(identity.username);  // 类自身访问静态属性,不会报错console.log(a.username);      //实例对象访问静态属性,会报错 :属性“username”在类型“identity”上不存在。console.log(identity.bolkfn());  // 类自身访问静态方法,不会报错console.log(a.bolkfn());      //实例对象访问静态方法,会报错 :属性“bolkfn”在类型“identity”上不存在。

扩展知识点

在ES7 中有一些关于类的新特性提案,TypeScript 也实现了它们,这里做一个简单的介绍。

ES6 中实例的属性只能通过构造函数中的 this.xxx 来定义,而在 ES7 提案中可以直接在类里面定义:

class Animal {name = 'Jack';  //可以直接在类中定义,非必须要在 constructor 通过 this.name 来定义。constructor() {// ...}
}let a = new Animal();
console.log(a.name); // Jack 可以直接读取到name属性 

类的修饰符

TypeScript 可以使用三种访问修饰符(Access Modifiers),分别是 publicprivate protected

  • public :修饰的属性或方法是公有的,可以在任何地方被访问到,默认所有的属性和方法都是 public
  • private 修饰的属性或方法是私有的不能在声明它的类的外部访问,虽然 子类 可以通过 extends 继承它的私有属性,但是却无法读取
  • protected : 修饰的属性或方法是受保护的,它和 private 类似,区别是它在子类中也是允许被访问的,也依然无法在外部访问

例:
public

class Animal {public name;public constructor(name) {this.name = name;}
}
let a = new Animal('Jack');
console.log(a.name); // Jack
a.name = 'Tom';
console.log(a.name); // Tom

private

class Animal {private name;   //设置私有化public constructor(name) {this.name = name;}
}let a = new Animal('Jack');
console.log(Animal.name);  //只能自身读取console.log(a.name);  //报错
a.name = 'Tom';   //报错

即使通过子类继承,在子类继承中也不能访问读取

class Animal {private name;public constructor(name) {this.name = name;}
}
class Cat extends Animal {constructor(name) {super(name);console.log(this.name);   //报错,子类继承中也无法访问私有化数据}
}

当构造函数修饰为 private 时,该类 允许被继承或者实例化:

class Animal {public name;private constructor(name) {  //构造函数 private 私有化this.name = name;}}class Cat extends Animal {  //报错不能被继承constructor(name) {super(name);}}let a = new Animal('Jack');  //报错,不应该被实例化

protected

当使用 protected 修饰,则 允许 在子类中访问:

class Animal {private name;public constructor(name) {this.name = name;}
}
class Cat extends Animal {constructor(name) {super(name);console.log(this.name);   //不会报错,子类继承中可以访问}
}

当构造函数修饰为 protected 时,该类只允许被继承:

class Animal {public name;protected constructor(name: string) {this.name = name;}
}
class Cat extends Animal {constructor(name: string) {super(name);}
}let a = new Animal('Jack');  //报错,因为  Animal 只允许被继承。

参数属性:

上面,介绍的三种 修饰符,其实还有一种简洁的写法,被称为 属性参数写法;修饰符还可以使用在构造函数参数中等同于类中定义该属性同时给该属性赋值,使代码更简洁。

class Animal {// public name;   //可以省略此处protected constructor(public name: string) {  //  private   protected  同理// this.name = name;   //可以省略此处}
}

readonly : 只读属性关键字,只允许出现在属性声明或索引签名或构造函数中。

class Animal {readonly name;public constructor(name) {this.name = name;}
}let a = new Animal('Jack');
console.log(a.name); // Jack
a.name = 'Tom';    //会报错,因为属性为 只读的,不能修改。

注意;
注意如果 readonly 和其他访问修饰符同时存在的话,需要写在其后面。

class Animal {// public readonly name;public constructor(public readonly name) {// this.name = name;}
}

抽象类

概念:抽象类的概念是,专注于用来为子类服务的,抽象类是不允许被实例化的,只能通过被子类继承。
语法:abstract 关键字用于定义抽象类和其中的抽象方法

abstract class Animal {  // 通过 abstract  定义一个抽象类public name;public constructor(name) {this.name = name;}public abstract sayHi();    //并且在抽象类里面,还可以定义 抽象方法
}let a = new Animal('Jack');  //会报错,抽象类不能被实例化

注意抽象类中的抽象方法或属性必须被子类实现,否则在子类继承抽象类后,实例化的时候会报错

abstract class Animal {  // 通过 abstract  定义一个抽象类public name;public constructor(name) {this.name = name;}public abstract sayHi() { };    //并且在抽象类里面,还可以定义 抽象方法
}class B extends Animal {public sayHi() {   //抽象类中,所定义抽象方法,必须要在子类中实现。console.log("继承Animal");}
}
let isB = new B("")

类的类型:

给实例化的类,定义类型,简述而言,就是定义的 class 类,还可以被用来当做 一种类型,赋值给实例化的对象,用来校验类的数据完整性。

案例说明:

class Animal {name: string;constructor(name: string) {this.name = name;}sayHi(): string {return `My name is ${this.name}`;}
}// 把 Animal  当做一种类型,用来校验实例化对象 a 的规范性。
let a: Animal = new Animal('Jack');
console.log(a.sayHi()); // My name is Jack

总结:

本章节,主要给大家介绍了,在 TypeScript 中,如何去声明 class 类,以及对 class 类的主要运用解析。欢迎大家交流评论。


🚵‍♂️ 博主座右铭:向阳而生,我还在路上!
——————————————————————————————
🚴博主想说:将持续性为社区输出自己的资源,同时也见证自己的进步!
——————————————————————————————
🤼‍♂️ 如果都看到这了,博主希望留下你的足迹!【📂收藏!👍点赞!✍️评论!】
——————————————————————————————

相关文章:

【TypeScript】中定义与使用 Class 类的解读理解

目录 类的概念类的继承 :类的存取器:类的静态方法与静态属性:类的修饰符:参数属性:抽象类:类的类型: 总结: 类的概念 类是用于创建对象的模板。他们用代码封装数据以处理该数据。JavaScript 中的…...

好用的数据库管理软件之idea(idea也有数据库???)

1.建立maven项目(maven项目添加依赖,对于后期连接数据库很方便) 2.连接数据库。。。 这里一定注意端口号,不要搞错了 和上一张图片不一样哦 3.数据库测试代码。。。 然后你就可以在这里边写MySQL代码了,这个工具对于新…...

《操作系统-李治军》测验错题集

章节测试1 启动保护模式以后&#xff0c;指令jmpi 0, 8执行和没有启动保护模式有何区别&#xff1f;&#xff08;&#xff09; 答&#xff1a;得出跳转地址的方式不同 实模式&#xff1a;cs<<4 ip 保护模式&#xff1a;cs查表 ip ‎在系统调用的实现中&#xff0c;在i…...

DP-GAN-判别器代码

将输出的rgb作为输入&#xff0c;输入到判别器中。接着执行一个for循环&#xff0c;看一下body_down列表的组成和x经过body_down之后的值。 body_down是由残差块D组成的列表&#xff1a; 残差块的参数为&#xff1a;(3,128),(128,128),(128,256),(256,256),(256,512),(512,5…...

基于多线程实现服务器并发

看大丙老师的B站视频总结的笔记19-基于多线程实现服务器并发分析_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1F64y1U7A2/?p19&spm_id_frompageDriver&vd_sourcea934d7fc6f47698a29dac90a922ba5a3 思路&#xff1a;首先accept是有一个线程的&#xff0c;另外…...

Golang之路---03 面向对象——接口与多态

接口与多态 何为接口 在面向对象的领域里&#xff0c;接口一般这样定义&#xff1a;接口定义一个对象的行为。接口只指定了对象应该做什么&#xff0c;至于如何实现这个行为&#xff08;即实现细节&#xff09;&#xff0c;则由对象本身去确定。   在 Go 语言中&#xff0c;…...

一条自由游动的鲸鱼

先看效果&#xff1a; 再看代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>鲸鱼</title><style>#canvas-container {width: 100%;height: 100vh;overflow: hidden;}&l…...

将python源代码打包成.exe可执行文件

步骤 1、安装pyinstaller2、打开终端或命令提示符窗口并进入解释器的虚拟环境3、从解释器的虚拟环境进入包含要打包Python文件的目录4、通过以下命令打包5、打包后文件存放位置 1、安装pyinstaller pip install pyinstaller2、打开终端或命令提示符窗口并进入解释器的虚拟环境…...

【数据结构篇】手写双向链表、单向链表(超详细)

文章目录 链表1、基本介绍2、单向链表2.1 带头节点的单向链表测试类&#xff1a;链表实现类&#xff1a; 2.2 不带头节点的单向链表2.3 练习测试类&#xff1a;链表实现类&#xff1a; 3、双向链表测试类&#xff1a;双向链表实现类&#xff1a; 4、单向环形链表**测试类**&…...

linux 中的串口驱动

1.流程描述 打开串口设备&#xff1a;首先需要打开串口设备文件&#xff0c;通常是/dev/ttyX&#xff08;如/dev/ttyUSB0&#xff0c;/dev/ttyS0等&#xff09;。可以使用open()系统调用打开串口设备文件&#xff0c;获取一个文件描述符。 配置串口属性&#xff1a;打开…...

棱镜七彩正式加入龙蜥社区安全联盟(OASA)

近日&#xff0c;龙蜥社区安全联盟&#xff08;OASA&#xff09;正式成立&#xff0c;棱镜七彩成为该联盟成员单位。 龙蜥社区安全联盟是促进产业合作的非营利组织&#xff0c;致力于打造中立开放、聚焦操作系统信息安全的交流平台&#xff0c;推进龙蜥社区乃至整个产业安全生态…...

STM32——STM32F401x系列标准库的下载+环境搭建+建工程步骤(更完整)

文章目录 标准库的下载环境搭建建工程最后的话 标准库的下载 1.STM32标准库的官网下载网站https://www.st.com/content/st_com/en.html 2. 3. 4. 5. 6. 7.点击之后下滑 8.选择自己需要的版本下载 环境搭建建工程 大致步骤同之前我写的一篇STM32——建工程差不多&#xff0…...

基于ArcGIS土地利用量化人类活动的分析及模型构建

ArcGIS产品线为用户提供一个可伸缩的&#xff0c;全面的GIS平台。ArcObjects包含了许多的可编程组件&#xff0c;从细粒度的对象&#xff08;例如单个的几何对象&#xff09;到粗粒度的对象&#xff08;例如与现有ArcMap文档交互的地图对象&#xff09;涉及面极广&#xff0c;这…...

特性Attribute

本文只提及常用的特性&#xff0c;更多特性请查看官方文档。 AddComponentMenu - Unity 脚本 API 常用特性 AddComponentMenu 添加组件菜单 使用 AddComponentMenu 属性可在“Component”菜单中的任意位置放置脚本&#xff0c;而不仅是“Component > Scripts”菜单。 使用…...

pyqt5, 如何在窗口上显示10个点地循环进度条。

要在PyQt5窗口上显示从1个点逐渐增加到10个点&#xff0c;然后周而复始地循环&#xff0c;可以使用PyQt5的图形绘制功能和定时器来实现。以下是一个简单的例子&#xff1a; import sys from PyQt5.QtWidgets import QApplication, QWidget from PyQt5.QtGui import QPainter, …...

VM里ubuntu虚拟无法启动

开始认为是VM的设置问题&#xff0c;按照这个链接关闭的3d加速图像显示&#xff0c;以及那个cmd命令&#xff0c;但是没什么用。 后来看到一篇博文和我的错误一模一样&#xff0c;都是只有一个光标在闪。于是按照这个操作进行了一遍&#xff0c;发现是home文件满了&#xff0c…...

信息学奥赛一本通——1156:求π的值

文章目录 题目【题目描述】【输入】【输出】【输入样例】【输出样例】 AC代码 题目 【题目描述】 根据公式&#xff1a; a r c t a n x ( x ) x − x 3 3 x 5 5 − x 7 7 ⋯ arctanx\left ( x \right ) x- \frac{x^3}{3} \frac{x^5}{5}-\frac{x^7}{7} \cdots arctanx(x…...

BI报表工具有哪些作用?奥威BI全面剖析数据

BI报表工具有哪些作用&#xff1f;主要的作用是通过整合多业务来源数据&#xff0c;全面分析挖掘数据&#xff0c;来帮助企业实现数据化运营、支持智能决策、实现数据资产沉淀和增值、进行数据挖掘和预测分析、提高数据可读性和数据可视化程度等&#xff0c;从而提高企业的竞争…...

【云原生K8s】初识Kubernetes的理论基础

K8S由google的Borg系统(博格系统&#xff0c;google内部使用的大规模容器编排工具)作为原型&#xff0c;后经GO语言延用Borg的思路重写并捐献给CNCF基金会开源。 云原生基金会&#xff08;CNCF&#xff09;于2015年12月成立&#xff0c;隶属于Linux基金会。CNCF孵化的第一个项目…...

javaAPI(三):jdk8之前的日期API

jdk 8之前的日期时间API 1、System类中currentTimeMillis()。 2、 java.util.Date和子类java.sql.Date。 3、SimpleDateFormat 4、Calendar System返回时间戳 long time System.currentTimeMillis();System.out.println(time);Date类 java.util.Date类 实例化 构造器一&a…...

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

什么是库存周转?如何用进销存系统提高库存周转率?

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

无人机侦测与反制技术的进展与应用

国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机&#xff08;无人驾驶飞行器&#xff0c;UAV&#xff09;技术的快速发展&#xff0c;其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统&#xff0c;无人机的“黑飞”&…...