一份不可多得的 TypeScript 学习笔记

2023-02-28

name this log

Hi，我是前端人，今日与君共勉!本篇文章主要介绍typeScript中类的定义、类的继承、类中成员修饰符等内容。typeScript中的类与ES6中的类非常相似，如果不知道ES6中的类，建议先学习下ES6中的class。本篇文章重点介绍typeScript中的类定义、继承以及修饰符。1、类的定义类描

Hi，我是前端人，今日与君共勉!本篇文章主要介绍 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);1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

编译以上代码，得到的 js 代码如下：

"use strict";
class Web {
 constructor(n) {
  this.workTime = n;
 }
 showWork() {
  return "搬砖的前端";
 }
}
let qq = new Web("五年");
console.log(qq.showWork());
console.log(qq.workTime);1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

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("冷藏")1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

上述示例是一个最基本的类继承，其中 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());1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

编译以上代码啊，得到的 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());1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

此时会执行子类中的方法。其原理是，类继承后，子类可以对父类的方法进行重新定义，这个过程称之为方法的重写。

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());1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

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);1.
2.
3.
4.
5.
6.
7.
8.

使用 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 及子类中访问1.
2.
3.
4.
5.
6.
7.
8.

它的特点：被它标记的成员在类的里面、子类里面能使用，但是在类的外面不能使用。

理解 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()1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.