TypeScript学习总结之类

类的注解方式

1
2
3
4
5
6
7
8
9
class Animal {
name: string;
constructor(theName: string) {
this.name = theName;
}
move(distanceInMeters: number = 0) {
console.log(`${this.name} moved ${distanceInMeters}m.`);
}
}

继承中 super

// 注意这个 super, 如果在 constructor 内就是默认指 构造函数 。

// 如果在 constructor 外部(除了 constructor),这个 super 就是指的 父类 (Animal)。

1
2
3
4
5
6
7
8
9
class Snake extends Animal {
constructor(name: string) {
super(name);
} // 这里的super => constructor Animal(theName: string) : Animal
move(distanceInMeters = 5) {
console.log('Slithering...');
super.move(distanceInMeters); // 这里的 super => 父类 Animal
}
}

类的修饰符

三大类成员修饰符: public / private / protected

public

// 在 TypeScript 里,成员都默认为 public。

// 如果类默认不写, 就是 public

public : 公共成员属性

  • 自身类可以调用
  • 子类可以调用
  • 实例可以调用
1
2
3
4
5
6
7
8
9
class Animal {
public name: string;
public constructor(theName: string) {
this.name = theName;
}
public move(distanceInMeters: number) {
console.log(`${this.name} moved ${distanceInMeters}m.`);
}
}

private

// private : 私有属性

  • 只能自身调用

// 当我把 Animal 类中的 构造函数变成私有, 如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
class Animal {
public name: string;
private constructor(theName: string) {
this.name = theName;
}
public move(distanceInMeters: number = 0) {
console.log(`${this.name} moved ${distanceInMeters}m.`);
}
}

class Snake extends Animal {
constructor(name: string) {
super(name);
}
move(distanceInMeters = 5) {
console.log('Slithering...');
super.move(distanceInMeters);
}
}

let sam = new Snake('Sammy the Python');
sam.move();

因此 , 可证明 private 只能自身调用, 子类和实例不能调用.

protected

protected 修饰符与 private 修饰符的行为很相似,但有一点不同, protected 成员在派生类中仍然可以访问。

也就是说 protected 可以自身调用,也可以子类调用.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
class Animal {
public name: string;
public constructor(theName: string) {
this.name = theName;
}
protected move(distanceInMeters: number = 0) {
console.log(`${this.name} moved ${distanceInMeters}m.`);
}
}

class Snake extends Animal {
constructor(name: string) {
super(name);
}
move(distanceInMeters = 5) {
console.log('Slithering...');
super.move(distanceInMeters);
}
}

let jack = new Animal('jack');
jack.move(); // 报错,

这时,在编辑器上, 实例调用 move 方法会报错,

readonly(只读)修饰符

1
2
3
4
5
6
7
8
9
10
11
12
13
class Octopus {
public readonly name: string; // readonly 要放在 public 这种访问属性修饰符 后面
private readonly numberOfLegs: number = 8;
constructor(theName: string) {
this.name = theName;
}
say() {
// 错误 : 修饰符仅可出现在属性声明或索引签名中
console.log('hi');
}
}
let dad = new Octopus('Man with the 8 strong legs');
dad.name = 'Man with the 3-piece suit'; // 错误! name 是只读的.

readonly 注意事项:

  • 顺序: 要放在 public/private/protected 之后
  • 是否可写: 加上 readonly 表示 只读,不可写
  • 不能修饰成员方法.

参数属性

简写写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class Animal1 {
constructor(private name: string) {}
move(distanceInMeters: number = 0) {
console.log(`${this.name} moved ${distanceInMeters}m.`);
}
}

// 等价于

class Animal2 {
private name: string;
constructor(name: string) {
this.name = name;
}
move(distanceInMeters: number = 0) {
console.log(`${this.name} moved ${distanceInMeters}m.`);
}
}

存取器

大概看了一下, 其实就是 getter 和 setter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
let passcode = 'secret passcode';

class Employee {
private _fullName: string = 'jack';

get fullName(): string {
return this._fullName;
}

set fullName(newName: string) {
if (passcode && passcode == 'secret passcode') {
this._fullName = newName;
} else {
console.log('Error: Unauthorized update of employee!');
}
}
}

let employee = new Employee();
console.log(employee.fullName); // jack

console.log((employee.fullName = 'new jack')); // new jack

静态属性

这个也是 不属于 TS 新有的知识, 学到这里,我发现其实我们大都是还是在复习 JS, 要学好 TS 前提是 JS 基础一定要好啊

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class Grid {
static origin = { x: 0, y: 0 };
calculateDistanceFromOrigin(point: { x: number; y: number }) {
let xDist = point.x - Grid.origin.x;
let yDist = point.y - Grid.origin.y;
return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale;
}
constructor(public scale: number) {}
}

let grid1 = new Grid(1.0); // 1x scale
let grid2 = new Grid(5.0); // 5x scale

console.log(grid1.calculateDistanceFromOrigin({ x: 10, y: 10 }));
console.log(grid2.calculateDistanceFromOrigin({ x: 10, y: 10 }));

抽象类

抽象类: 能够提供其他类的基类 , 它们一般不会直接被实例化

抽象类:

  1. 无法创建实例
  2. 在抽象类中 抽象方法一定要实现 (这一点和接口很像)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
abstract class Animal {
abstract makeSound(): void;
move(): void {
console.log('我在移动');
}
}

class Dog extends Animal {
makeSound() {
// 一定要去定义这个方法, 因为抽象类中包含这个抽象方法
console.log('汪汪汪');
}
}

class Cat extends Animal {
makeSound() {
console.log('喵喵喵');
}
}

高阶技巧

  1. 定义类的时候, 定义了一个类型;
  2. 定义类的时候, 定义了一个构造函数;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class Greeter {
static standardGreeting = 'Hello, there'; // 静态属性
greeting: string;
greet() {
if (this.greeting) {
return 'Hello, ' + this.greeting;
} else {
return Greeter.standardGreeting;
}
}
}

let greeter1: Greeter; // 定义类型
greeter1 = new Greeter();
console.log(greeter1.greet());

let greeterMaker: typeof Greeter = Greeter; // 定义类型
greeterMaker.standardGreeting = 'Hey there!';

let greeter2: Greeter = new greeterMaker();
console.log(greeter2.greet());
  1. 把类当做接口使用
1
2
3
4
5
6
7
8
9
10
class Point {
x: number;
y: number;
}

interface Point3d extends Point {
z: number;
}

let point3d: Point3d = { x: 1, y: 2, z: 3 };