TypeScript中的类-JXin的博客

温馨提示

该文章距离上次更新已经过去了 1147 天，文章内容可能已经过时。

TypeScript中的类

类初始化变量

在JavaScript中类初始化变量只需要写在constructor中，而在TypeScript有区别

// js
class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

// ts
class User {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

属性的初始化检查

在TypeScript中如果没有初始化变量是不会报错的，但是在使用的时候就会报错，会显示没有参数
TypeScript中的类
这时候可以在配置中添加 strictPropertyInitialization 进行属性的初始化检查

{
 // 编译配置
 "compilerOptions": {
 		"strictPropertyInitialization": true // 检查类中属性有没有初始化
  },
}

1
2
3
4
5
6

属性的初始化检查
可以看到设置之后，如果属性没有进行初始化，就会直接报错

属性可以修饰为可选的

可以通过 ? 将属性设置为可选，例如：

class User {
  name: string;
  age: number;
  skill?: string;

  constructor(name: string, age: number, skill?: string) {
    this.name = name;
    this.age = age;
    this.skill = skill;
  }
}

const u = new User("sjxlife", 10);

1
2
3
4
5
6
7
8
9
10
11
12
13

这样第三个参数skill可传可不传

可选参数必须放在最后，不然会报错

class User {
  private readonly id: number;
  constructor(public name: string, public skill?: string, public age: number) {
    this.id = Math.random();
    this.name = name;
    this.age = age;
    this.skill = skill;
  }
}

const u = new User("sjxlife", 10);

1
2
3
4
5
6
7
8
9
10
11

可选参数必须放在最后

属性也可以修饰为只读的

可以通过 readonly 来设置属性只读，例如：

class User {
  readonly id: number;
  name: string;
  age: number;
  skill?: string;

  constructor(name: string, age: number, skill?: string) {
    this.id = Math.random();
    this.name = name;
    this.age = age;
    this.skill = skill;
  }
}

const u = new User("sjxlife", 10);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

可以看到要修改id，会显示id为只读属性
属性也可以修饰为只读的

使用访问修饰符

如果不希望类中的某个属性或者方法被外界访问到，可以使用访问修饰符控制类中的某个成员的访问权限，访问修饰符有三种：

public：默认的访问修饰符，公开的，所有的代码均可访问
private：私有的，只有在类中可以访问

class User {
  private readonly id: number;
  name: string;
  age: number;
  skill?: string;

  constructor(name: string, age: number, skill?: string) {
    this.id = Math.random();
    this.name = name;
    this.age = age;
    this.skill = skill;
  }
}

const u = new User("sjxlife", 10);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

使用访问修饰符
可以看到u中已经没有id的提示了，且会显示id为私有属性

protected：受保护

属性简写

如果某个属性，通过构造函数的参数传递，并且不做任何处理的赋值给该属性。可以使用 public 进行简写

class User {
  private readonly id: number;
  constructor(public name: string, public age: number, public skill?: string) {
    this.id = Math.random();
    this.name = name;
    this.age = age;
    this.skill = skill;
  }
}

const u = new User("sjxlife", 10);

1
2
3
4
5
6
7
8
9
10
11

访问器

作用：用于控制属性的读取和赋值
使用场景：例如需要控制某个值的取值范围

class User {
  private readonly id: number;
  constructor(public name: string, private _age: number) {
    this.id = Math.random();
    this.name = name;
  }
  set age(val: number) {
    if (val < 0) {
      this._age = 0;
    } else if (val > 200) {
      this._age = 200;
    } else {
      this._age = val;
    }
  }
  get age() {
    return this._age;
  }
}

const u = new User("sjxlife", 200);
u.age = 50;
console.log(u.age); // 50

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

可以通过set和get来控制age的取值（set和get并不是TypeScript中才有的，JavaScript中也有，所有在编译的时候，set和get也会编译进去）

类的继承

继承可以描述类与类之间的关系

例如：在游戏坦克大战中

坦克、玩家坦克、敌方坦克
玩家坦克是坦克，地方坦克是坦克

如果A和B都是类，并且可以描述为A是B，则A和B形成继承关系：

B是父类，A是子类
B派生A，A继承自B
B是A的基类，A是B的派生类

如果A继承自B，则A中自动拥有B中的所有成员

成员的重写

重写（override）：子类中覆盖父类的成员

子类成员不能改变父类成员的类型，例如：

// 属性
class Tank {
  a: number = 10;
  b: string = "坦克";
}

class TankA extends Tank {
  a: string = 20;
}

1
2
3
4
5
6
7
8
9

TypeScript中的类

// 方法
class Tank {
  sayHello(msg: string) {}
}

class TankA extends Tank {
  sayHello(msg: number) {}
}

1
2
3
4
5
6
7
8

TypeScript中的类
可以看到在子类TankA中要把属性a修改为string是不被允许的，所以，无论是属性还是方法，子类都可以对父类的相应成员进行重写，但是重写时，需要保证类型的匹配

在继承关系中，this的指向是动态的，调用方法时，根据具体的调用者确定this指向

class Tank {
  a: number = 10;
  sayHello() {
    console.log(this.a);
  }
}

class TankA extends Tank {
  a: number = 20;
  sayHello() {
    console.log(this.a);
  }
}

const A = new TankA();
const B = new Tank();

A.sayHello(); // 20
B.sayHello(); // 10

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

可以看到调用的是哪个类，this就指向那个类（new的是哪个类，this就指向哪个类）

在子类的方法中，可以使用super关键字读取父类的成员

class Tank {
  a: number = 10;
  sayHello() {
    console.log(1234);
  }
}

class TankA extends Tank {
  a: number = 20;
  sayHello() {
    console.log(5678);
  }
  test() {
    super.sayHello(); // 1234
    this.sayHello(); // 5678
  }
}

const A = new TankA();

A.test();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

可以看到this指向的sayHello和super中的sayHello调用的是不一样的，super中调用的是父类中的sayHello，但是如果父类中的方法使用了this，这个this指向的还是子类，例如：

class Tank {
  a: number = 10;
  sayHello() {
    console.log(this.a);
  }
}

class TankA extends Tank {
  a: number = 20;
  b: number = 30;
  sayHello() {
    console.log(this.a);
  }
  test() {
    super.sayHello(); // 20
    this.sayHello(); // 20
  }
}

const A = new TankA();

A.test();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

类型匹配

判断一个类是不是另一个类的子类，可以使用 鸭子辨型法 ，子类的对象，始终可以赋值给父类

如果需要判断一个数据的具体子类型，可以使用instanceof

protected修饰符

protected和private、public一样，都属于访问权限修饰，

protected：受保护的成员，只能在自身和子类中访问

class Tank {
  protected a: number = 10;
  sayHello() {
    console.log(this.a);
  }
}

class TankA extends Tank {
  a: number = 20;
  sayHello() {
    console.log(this.a);
  }
  test() {
    super.sayHello(); // 20
    this.sayHello(); // 20
  }
}

const A = new TankA();
const B = new Tank();

A.test();

console.log(B.a);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

TypeScript中的类
可以看到在外部访问不了Tank类中的a，但是如果子类中修改了a属性，且没有加上protected修饰符，那么外部是可以访问子类TankA中的a属性的，例如：

class Tank {
  protected a: number = 10;
  sayHello() {
    console.log(this.a);
  }
}

class TankA extends Tank {
  a: number = 20;
  sayHello() {
    console.log(this.a);
  }
  test() {
    super.sayHello(); // 20
    this.sayHello(); // 20
  }
}

const A = new TankA();
const B = new Tank();

A.test();

console.log(A.a); // 20

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

单根性和传递性

类的继承具有单根性和传递性

单根性：每个类最多只能拥有一个父类

传递性：如果A是B的父类，并且B是C的父类，则，可以认为A也是C的父类

抽象类

为什么需要抽象类

有时，某个类只表示一个抽象类，主要用于提取子类共有的成员，而不能直接创建它的对象。该类可以作为抽象类。

例如：在象棋游戏中，不过是马、兵、象，或者其它的棋子它们都有共同的属性，那就是都是棋，所以可以先写一个棋子的类，之后，所以的角色的棋子都是基于它来实现的

class Chess {}

class Horse extends Chess {}

class Soldier extends Chess {}

1
2
3
4
5

这时候Chess类是不能直接创建对象的，我们可以把它作为抽象类

给类前面加上 abstract ，表示该类是一个抽象类，不可以创建一个抽象类的对象。

abstract class Chess {}

class Horse extends Chess {}

class Soldier extends Chess {}

const c = new Chess(); // 报错

1
2
3
4
5
6
7

TypeScript中的类

抽象成员

父类中，可能有些成员是必须存在的，但是不知道该成员的值或实现是什么，因为，需要一种强约束，让继承该类的子类，必须要实现该成员。

例如：在象棋游戏中，我们创建的Chess类，并不知道每个棋子的名字，但是名字又是必须存在的，那么名字就是可以是一个抽象成员，这些抽象成员必须在子类中实现

abstract class Chess {
  abstract name: string;
}

class Horse extends Chess {
  name: string = "马";
}

class Soldier extends Chess {
  name: string = "兵";
}

const c = new Horse();

1
2
3
4
5
6
7
8
9
10
11
12
13

TypeScript中的类

静态成员

静态成员是指，附着在类上的成员（属于某个构造函数的）

使用static修饰的成员，是静态成员

class User {
  static user: [] = [];
}

console.log(User.user); // []

1
2
3
4
5

实例成员：对象成员，属于某个类的对象

静态成员：非实例成员，属于某个类

静态方法中的this

实例方法中的this指向的是当前对象，而静态方法中的this指向的是当前类

class User {
  static user: [] = [];
  static sayHello() {
    console.log(this); // [class User] { user: [] }
  }
}

User.sayHello();

1
2
3
4
5
6
7
8

使用静态成员来实现单例模式

class User {
  private static _board?: User;
  static createUser(): User {
    if (this._board) {
      return this._board;
    }
    this._board = new User();
    return this._board;
  }
}

const u1 = User.createUser();
const u2 = User.createUser();
console.log(u1 === u2); // true

1
2
3
4
5
6
7
8
9
10
11
12
13
14

类中的接口

在类中，对于一个类的成员函数没有强约束力，也就是一个类中应该有哪些属性和方法没有得到约束，缺少了对能力的定义，这时候可以使用接口。

在面向对象领域中，接口表达了某个类是否拥有某种能力，也就是某个类具有某种能力，实际上就是实现了某种接口。在ts中，类可以使用 implements 来实现一个接口。

例如：在一个人的类中，需要一个技能的属性

interface IUser {
  skill: string;
}

class User implements IUser {}

1
2
3
4
5

TypeScript中的类
可以看到如果在类中没有skill属性，就会报错
\

类型保护函数

类型保护函数：通过调用该函数，会触发TS的类型保护，该函数必须返回boolean

为什么需要类型保护函数

JavaScript 并没有内置非常丰富的、运行时的自我检查机制。当你在使用普通的 JavaScript 对象时（使用结构类型，更有益处），你甚至无法访问 instanceof 和 typeof。在这种情景下，你可以创建用户自定义的类型保护函数，如下：

// 仅仅是一个 interface
interface Foo {
  foo: number;
  common: string;
}

interface Bar {
  bar: number;
  common: string;
}

// 用户自己定义的类型保护！
function isFoo(arg: Foo | Bar): arg is Foo {
  return (arg as Foo).foo !== undefined;
}

// 用户自己定义的类型保护使用用例：
function doStuff(arg: Foo | Bar) {
  if (isFoo(arg)) {
    console.log(arg.foo); // ok
    console.log(arg.bar); // Error
  } else {
    console.log(arg.foo); // Error
    console.log(arg.bar); // ok
  }
}

doStuff({ foo: 123, common: '123' });
doStuff({ bar: 123, common: '123' });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

接口与类型别名的区别

接口可以被类实现，而类型别名不可以

接口继承类

接口可以继承类，表示该类的所有成员都在接口中

class A {
  a1: number = 0;
}

class B {
  b1: string = "b1";
}

interface C extends A, B {}

const d: C = {
  a1: 10,
  b1: "c",
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14