|
| 1 | +# TypeScript 的面向对象 |
| 2 | + |
| 3 | +## 类语法 |
| 4 | + |
| 5 | +一般而言,使用类语法足以应对常见的各种需求,这种写法在很大程度上与 C++ 是类似的。TypeScript 语言之中的类允许声明类成员和方法的访问权限。这里我们编写一个简易的复数类作为演示,内部已经包含了构造函数、定义成员方法和静态方法等: |
| 6 | + |
| 7 | +```typescript |
| 8 | +class Complex { |
| 9 | + // 这部分在 JavaScript 中是不存在的,JavaScript 只要任意访问 this.propertyName 即可 |
| 10 | + private real: number; |
| 11 | + private imaginary: number; |
| 12 | + |
| 13 | + constructor(_real: number, _imaginary: number) { |
| 14 | + this.real = _real; |
| 15 | + this.imaginary = _imaginary; // Declare members & initialize |
| 16 | + } |
| 17 | + |
| 18 | + print() { |
| 19 | + console.log(`${this.real} ${this.imaginary >= 0 ? "+" : "-"} ${Math.abs(this.imaginary)} i`); |
| 20 | + } |
| 21 | + |
| 22 | + static printInfo() { |
| 23 | + console.log("This is a complex class."); |
| 24 | + } |
| 25 | +} |
| 26 | + |
| 27 | +let com = new Complex(1, 2); |
| 28 | +com.print(); // "1 + 2 i" |
| 29 | +Complex.printInfo(); // "This is a complex class." |
| 30 | +``` |
| 31 | + |
| 32 | +有一些细节需要注意: |
| 33 | + |
| 34 | +- 类方法内使用类成员的时候必须使用 `this` 调用; |
| 35 | +- JavaScript 的所有类成员和类方法均是公有的,JavaScript 不具有访问权限修饰符,尽管你可以看到我们使用 TypeScript 时标注了 `private` 属性,但这只是在编译时检查你的代码有没有不适当的访问,编译后如果你用 JavaScript 调用,仍然可以直接访问这些属性。 |
| 36 | + |
| 37 | +类继承使用关键字 `extends`,需要注意的是子类的构造函数**必须**手动使用 `super` 调用父类构造函数(否则无法使用 `this` 变量),对于已经被重写的父类方法,也可以使用 `super` 关键字调用: |
| 38 | + |
| 39 | +```typescript |
| 40 | +class Animal { |
| 41 | + private name: string; |
| 42 | + |
| 43 | + constructor(_name: string) { this.name = _name; } |
| 44 | + public move(): void { console.log("Animal moves"); } |
| 45 | +} |
| 46 | + |
| 47 | +class Cat extends Animal { |
| 48 | + private furColor: string; |
| 49 | + |
| 50 | + constructor(_name: string, _color: string) { |
| 51 | + super(_name); // Must call super() here! |
| 52 | + this.furColor = _color; |
| 53 | + } |
| 54 | + |
| 55 | + public move(): void { console.log("Cat runs"); } |
| 56 | + |
| 57 | + public baseMove(): void { super.move(); } |
| 58 | +} |
| 59 | + |
| 60 | +let tom: Cat = new Cat("tom", "blue"); |
| 61 | +tom.move(); |
| 62 | +tom.baseMove(); |
| 63 | +``` |
| 64 | + |
| 65 | +## 类与接口 |
| 66 | + |
| 67 | +在 TypeScript 中可以直接将类名作为类型标注: |
| 68 | + |
| 69 | +```typescript |
| 70 | +class Complex { |
| 71 | + real: number; |
| 72 | + imaginary: number |
| 73 | + |
| 74 | + constructor(_real: number, _imaginary: number) { |
| 75 | + this.real = _real; |
| 76 | + this.imaginary = _imaginary; // Declare members & initialize |
| 77 | + } |
| 78 | +} |
| 79 | + |
| 80 | +let com: Complex = new Complex(1, 2); |
| 81 | +``` |
| 82 | + |
| 83 | +更多的时候,我们只在意一个对象的部分属性,而不在意其他部分。抽象类依然是存在的,但在实际工程中更常用的是**接口**。 |
| 84 | + |
| 85 | +!!! note "抽象类和接口" |
| 86 | + |
| 87 | + 我们回想在 C++ 语言之中的抽象类: |
| 88 | + |
| 89 | + ```c++ |
| 90 | + class Base { |
| 91 | + protected: |
| 92 | + int val; |
| 93 | + |
| 94 | + public: |
| 95 | + virtual void print() = 0; |
| 96 | + }; |
| 97 | + |
| 98 | + class Derive: public Base { |
| 99 | + public: |
| 100 | + virtual void print() override { |
| 101 | + std::cout << this->val << std::endl; |
| 102 | + } |
| 103 | + }; |
| 104 | + ``` |
| 105 | + |
| 106 | + 事实上,`Base` 类的作用就是**约束子类必须具有 `val` 成员**和**约束子类必须重写 `print` 虚方法**,前者规定了子类必须具有的成员,后者规定了子类需要设计的接口格式(接口参数列表和返回值类型)。 |
| 107 | + 也就是说一个抽象父类的作用是约束子类应当具有的成员和对外开放的接口格式。 |
| 108 | + 在这个意义上,抽象类和接口是一致的。 |
| 109 | + |
| 110 | +```typescript |
| 111 | +interface Complex { |
| 112 | + real: number; |
| 113 | + imag: number; |
| 114 | +} |
| 115 | +``` |
| 116 | + |
| 117 | +这里声明了一个名为 `Complex` 的接口,它要求对象包含类型为 `number` 的属性 `real` 和 `imag`,因此如果我们写这样的函数: |
| 118 | + |
| 119 | +```typescript |
| 120 | +function printComplex(com: Complex) { |
| 121 | + console.log( |
| 122 | + `${com.real} ${com.imag >= 0 ? "+" : "-"} ${Math.abs(this.imag)} i` |
| 123 | + ); |
| 124 | +} |
| 125 | +``` |
| 126 | + |
| 127 | +就可以接受任意包含 `real` 和 `imag` 属性的参数,而不必要像类那样通过构造函数来构造。 |
| 128 | + |
| 129 | +类就必须具有接口的成员并实现接口的方法: |
| 130 | + |
| 131 | +```typescript |
| 132 | +interface Point { x: number; y: number; print: () => void; } |
| 133 | + |
| 134 | +class Point3D implements Point { |
| 135 | + x: number; y: number; z: number; |
| 136 | + ... |
| 137 | + print(): void { |
| 138 | + console.log(`(${this.x}, ${this.y}, ${this.z})`); |
| 139 | + } |
| 140 | + ... |
| 141 | +} |
| 142 | +``` |
| 143 | + |
| 144 | +接口支持**可选参数**和**只读参数**。可选参数代表该参数可具有可不具有: |
| 145 | + |
| 146 | +```typescript |
| 147 | +interface Point { x: number; y: number; z?: number; } |
| 148 | +let twoDimensionPoint: Point = { x: 1, y: 2 }; // OK |
| 149 | +``` |
| 150 | + |
| 151 | +只读参数代表该参数只可读取不可修改: |
| 152 | + |
| 153 | +```typescript |
| 154 | +interface User { name: string; readonly password: string; } |
| 155 | +let holder: User = { name: "holder", password: "111111" }; |
| 156 | +holder.password = "222222"; // Error! |
| 157 | +``` |
0 commit comments