【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 类的主要运用解析。欢迎大家交流评论。


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

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

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

相关文章

一起学SF框架系列7.1-spring-AOP-基础知识

AOP(Aspect-oriented Programming-面向切面编程)是一种编程模式,是对OOP(Object-oriented Programming-面向对象编程)一种有益补充。在OOP中,万事万物都是独立的对象,对象相互耦合关系是基于业务进行的;但在…

MySQL之深入InnoDB存储引擎——Undo页

文章目录 一、UNDO日志格式1、INSERT操作对应的UNDO日志2、DELETE操作对应的undo日志3、UPDATE操作对应的undo日志1)不更新主键2)更新主键的操作 3、增删改操作对二级索引的影响 二、UNDO页三、UNDO页面链表四、undo日志具体写入过程五、回滚段1、回滚段…

C语言系列之原码、反码和补码

一.欢迎来到我的酒馆 讨论c语言中,原码、反码、补码。 目录 一.欢迎来到我的酒馆二.原码 二.原码 2.1在计算机中,所有数据都是以二进制存储的,但不是直接存储二进制数,而是存储二进制的补码。原码很好理解,就是对应的…

SQL Server数据库如何添加Oracle链接服务器(Windows系统)

SQL Server数据库如何添加Oracle链接服务器 一、在添加访问Oracle的组件1.1 下载Oracle的组件 Oracle Provider for OLE DB1.2 注册该组件1.2.1 下载的压缩包解压位置1.2.2 接着用管理员运行Cmd 此处一定要用管理员运行,否则会报错 二、配置环境变量三、 重启SQL Se…

IDEA开启并配置services窗口

一、选择view -> Tool Windows -> Services 二、底下栏会出现Services 然后右键添加工程即可

Apache DolphinScheduler 3.1.8 版本发布,修复 SeaTunnel 相关 Bug

近日,Apache DolphinScheduler 发布了 3.1.8 版本。此版本主要基于 3.1.7 版本进行了 bug 修复,共计修复 16 个 bug, 1 个 doc, 2 个 chore。 其中修复了以下几个较为重要的问题: 修复在构建 SeaTunnel 任务节点的参数时错误的判断条件修复 …

【学习笔记】Java安全之反序列化

文章目录 反序列化方法的对比PHP的反序列化Java的反序列化Python反序列化 URLDNS链利用链分析触发DNS请求 CommonCollections1利用链利用TransformedMap构造POC利用LazyMap构造POCCommonsCollections6 利用链 最近在学习Phith0n师傅的知识星球的Java安全漫谈系列,随…

【多音音频测试信号】具有指定采样率和样本数的多音信号,生成多音信号的相位降低波峰因数研究(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

【torch.nn.PixelShuffle】和 【torch.nn.UnpixelShuffle】

文章目录 torch.nn.PixelShuffle直观解释官方文档 torch.nn.PixelUnshuffle直观解释官方文档 torch.nn.PixelShuffle 直观解释 PixelShuffle是一种上采样方法,它将形状为 ( ∗ , C r 2 , H , W ) (∗, C\times r^2, H, W) (∗,Cr2,H,W)的张量重新排列转换为形状为…

TechTool Pro for mac(硬件监测和系统维护工具)

TechTool Pro 是为 Mac OS X 重新设计的全新工具程序,不但保留旧版原有的硬件侦测功能,还可检查系统上其他重要功能,如:网络连接,区域网络等。 TechTool Pro for mac随时监控和保护您的电脑,并可预设定期检…

机器学习深度学习——非NVIDIA显卡怎么做深度学习(坑点排查)

👨‍🎓作者简介:一位即将上大四,正专攻机器学习的保研er 🌌上期文章:机器学习&&深度学习——数值稳定性和模型化参数(详细数学推导) 📚订阅专栏:机器…

mac安装vscode 配置git

1、安装vscode 官网地址 下载mac稳定版安装很慢的解决办法 (转自) mac电脑如何解决下载vscode慢的问题 选择谷歌浏览器右上角的3个点,选择下载内容,右键选择复制链接地址,在新窗口粘贴地址, 把地址中的一段替换成下面的cscode.sd…

电脑文件丢失如何找回?使用这个方法轻松找回!

电脑文件丢失怎么办?有没有免费的电脑文件恢复软件?相信很多人在日常办公中也都经常会遇到这种现象,不管是在学习中,还是日常的办公,往往也都会在电脑上存储大量的数据文件,那么如果我们在日常办公操作过程…

LabVIEW开发分段反射器测试台

LabVIEW开发分段反射器测试台 随着对太空的观察需求越来越远,而不是当前技术(如哈勃望远镜)所能达到的,有必要增加太空望远镜主镜的尺寸。但是,增加主镜像的大小时存在几个问题。随着反射镜尺寸的增加,制造…

利用hfish反控境外攻击源主机

导师给了7个网络安全课题选题,本想和他聊了下思路,他一挥手让我先做出点东西再来聊就把我打发走了…… 正好前段时间阿里云到校做推广,用优惠卷薅了一台云服务器,装了hfish先看下情况 没想到才装上没两天数据库就爆了&#xff0…

构建之法 - 软工教学:每天都向前推进一点点

作者:福州⼤学 汪璟玢⽼师 汪老师:每次都向前推进一点点,哪怕只有一点点,也好过什么都不做。 ​邹老师:对,几个学期下来,就已经超过那些“空想”的团队很远了。坚持下去! 汪老师&…

wonderful-sql 作业

Sql 作业 作业1: 答: create table Employee (Id integer not null, Name varchar(32) , Salary integer, departmentId integer, primary key (Id) );create table Department( Id integer primary key, Name varchar(30) not null );insert into emp…

多雷达探测论文阅读笔记:雷达学报 2023, 多雷达协同探测技术研究进展:认知跟踪与资源调度算法

多雷达协同探测技术 原始笔记链接:https://mp.weixin.qq.com/s?__biz=Mzg4MjgxMjgyMg==&mid=2247486627&idx=1&sn=f32c31bfea98b85f2105254a4e64d210&chksm=cf51be5af826374c706f3c9dcd5392e0ed2a5fb31ab20924b7dd38e1b1ae32abe9a48afa8174#rd ↑ \uparrow …

侯捷C++高级编程(下)

对于1个类要么像指针要么像函数 主题1:转换函数 转换函数 /** 1. 转换函数没有返回类型* 2. 转换函数一般需要加上const*/ class Fraction { public:Fraction(int num,int den1):m(num),n(den){cout<<"Fraction(int num,int den1): m/n "<< m/n<&…

WebGL: 几个入门小例子

本文通过WebGL例子&#xff0c;来帮助WebGL入门学习。 一、概述 WebGL (Web Graphics Library)是一组基于Open ES、在Web内渲染3D图形的Javascript APIs。 Ref. from Khronos Group: WebGL WebGL™ is a cross-platform, royalty-free open web standard for a low-level 3D …