TypeScript 学习笔记之 typeScript类定义,类的继承,类成员修饰符
前言：
typeScript 中的类与 ES6 中的类非常相似，如果不知道 ES6 中的类，建议先学习下 ES6 中的 class 。本篇文章重点介绍 typeScript 中的类定义、继承以及修饰符。
1、类的定义
类描述了所创建的对象共同的属性和方法。typeScript 支持面向对象的所有特性，比如类、接口等。
在 typeScript 中定义类的时候，使用 class 关键字，类名首字母使用大写，类可以包含以下三个模块：
- 字段 - 字段是类里面声明的变量，表示与对象有关的属性。
- 构造函数 - 类实例化时自动调用，可以为实例化的对象分配内存。
- 方法 - 方法为对象要执行的某种操作。
定义属性的时候，需要添加属性类型，构造函数中的参数也需要加类型，引用任何一个类的成员的时候都用 this ，this 关键字表示当前类实例化的对象。使用 new 关键字来实例化对象，并初始化它。
如示例：
class Web{
workTime: string
constructor(n:string) {
this.workTime = n
}
showWork(){
return "搬砖的前端"
}
}
let qq = new Web("五年")
console.log(qq.showWork());
console.log(qq.workTime);编译以上代码，得到的 js 代码如下：
"use strict";
class Web {
constructor(n) {
this.workTime = n;
}
showWork() {
return "搬砖的前端";
}
}
let qq = new Web("五年");
console.log(qq.showWork());
console.log(qq.workTime);2、类的继承
typeScript 支持继承类，即可以在创建类的时候继承一个已存在的类，类继承的时候使用 extends 关键字，基于类的程序设计中一种最基本的模式是允许使用继承来扩展现有的类。比如：
class Dirnks{
name: string
constructor(n: string) {
this.name = n
}
save(m: string) {
console.log(`${this.name}饮料应该${m}`);
}
}
class Soda extends Dirnks{
constructor(n: string) {
super(n)
}
}
let kele = new Soda("可乐")
kele.save("冷藏")上述示例是一个最基本的类继承，其中 Soda 继承了 Dirnks 的属性和方法，其中 Soda 是一个派生类，也叫做子类，Dirnks 是一个基类，也叫超类或父类。
派生类包含了一个构造函数，构造函数必须调用 super() ，会执行基类的构造函数。需要注意的是：在子类构造函数里访问 this 的属性之前，一定要先调用 super ，这是 typeScript 强制执行的一条重要规则。
如果父类和子类都包含某一方法时，方法名相同，但是具体执行内容不同的时候，该执行哪一个方法呢？
修改上述实例，给子类也添加一个方法，代码如下：
class Dirnks{
name: string
constructor(n: string) {
this.name = n
}
save(m: string) {
console.log(`${this.name}饮料应该${m}`);
}
}
class Soda extends Dirnks{
constructor(n: string) {
super(n)
}
save() {
return "存储方法"
}
}
let kele = new Soda("可乐")
console.log(kele.save());编译以上代码啊，得到的 js 代码如下：
"use strict";
class Dirnks {
constructor(n) {
this.name = n;
}
save(m) {
console.log(`${this.name}饮料应该${m}`);
}
}
class Soda extends Dirnks {
constructor(n) {
super(n);
}
save() {
return "存储方法";
}
}
let kele = new Soda("可乐");
console.log(kele.save());此时会执行子类中的方法。其原理是，类继承后，子类可以对父类的方法进行重新定义，这个过程称之为方法的重写。
typeScript 中子类只能继承一个父类，虽然不支持继承多个类，但是支持多重继承。如下：
class One{
name: string
constructor(n: string) {
this.name = n
}
show() {
return "展示"
}
}
class Two extends One{
constructor(n:string) {
super(n)
}
}
class Three extends Two{
constructor(n: string) {
super(n)
}
}
let three = new Three("剁成")
console.log(three.show());3、修饰符
在 typeScript 中，可以使用访问控制符来保护对类、变量、方法和构造函数的访问。typeScript 支持 3 种不同的访问权限，分别为：
- public（默认） - 公有，表示共享的属性和方法。可以在任何地方被访问。
- protected - 受保护，表示属性和方法被保护，可以被自身以及子类访问，不能在类外面使用。
- private - 私有，只能被其定义所在的类访问。
- readonly - 只读，只读属性必须在声明时或构造函数里初始化。
理解 public
在上边类中的成员定义的时候，没有明确使用任何修饰符，默认的就是 public ，所以可以将上面的类改写为：
class HH{
public name: string
public constructor(n: string) {
this.name = n
}
}
let h = new HH("HH")
console.log(h.name);使用 public 之后，对上面的应用并没有任何影响。
它的特点：被它标记的成员在类的里面、子类里面、类外面都可以访问到。
理解 protected
类中添加 protected 修饰符来修饰成员时，将上述实例的 public 修饰符修改为 protected 如下：
class HH{
protected name: string
constructor(n: string) {
this.name = n
}
}
let h = new HH("HH")
console.log(h.name); // 此处报错，提示 属性"name"受保护，只能在类 HH 及子类中访问它的特点：被它标记的成员在类的里面、子类里面能使用，但是在类的外面不能使用。
理解 private
class HH{
private name: string
constructor(n: string) {
this.name = n
}
}
class H extends HH{
constructor(n: string) {
super(n)
}
show() {
console.log(this.name); // 报错
}
}
let h = new H("HH")
console.log(h.name); // 报错
h.show()上面的示例报错，提示：属性“name”为私有属性，只能在类“HH”中访问。
它的特点：被它标记的成员不能再声明它的类的外部访问。
到此这篇关于TypeScript 学习笔记之 typeScript类定义,类的继承,类成员修饰符的文章就介绍到这了,更多相关 typeScript类定义,类的继承,类成员修饰符内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
umi插件开发仿dumi项目加载markdown文件实现详解
这篇文章主要为大家介绍了umi插件开发仿dumi项目加载markdown文件实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要介绍了微信小程序的日期选择器的实例详解的相关资料,希望通过本能帮助到大家，需要的朋友可以参考下2017-09-09
这篇文章主要介绍了微信小程序navigator组件实例详解的相关资料,需要的朋友可以参考下2016-09-09
这篇文要给大家介绍的是JavaScript原型链，文章主要介绍内容有构造函数、属性Prototype、属性Prototype、属性__proto__、访问原型上的方法等问题,需要的朋友可以参考一下文章的详细内容2021-11-11
这篇文章主要介绍了微信小程序 Page（）函数详解的相关资料,在开发过程中肯定会遇到Page（）函数，希望能帮助到大家，需要的朋友可以参考下2016-10-10
这篇文章主要介绍了微信小程序 实现tabs选项卡效果实例代码的相关资料,需要的朋友可以参考下2016-10-10
Proxy Facade设计模式简化系统访问的强大工具原理详解
这篇文章主要为大家介绍了 Proxy Facade设计模式简化系统访问的强大工具原理详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
这篇文章主要介绍了 JavaScript 与 TypeScript之间的联系,JavaScript,也称为 JS,是一种符合 ECMAScript 规范的编程语言。这是一个高级别的、通常是即时编译的、多范式的。TypeScript 是一种强类型、面向对象的编译语言，更多消息内容,需要的朋友可以参考一下下面文章内容2021-11-11
这篇文章主要介绍了微信小程序 条件渲染详解的相关资料,需要的朋友可以参考下2016-10-10
这篇文章主要为大家介绍了Electron 剪贴板实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
最新评论