類 · TypeScript 入門教程

# 類傳統方法中，JavaScript 通過構造函數實現類的概念，通過原型鏈實現繼承。而在 ES6 中，我們終于迎來了 `class`。 TypeScript 除了實現了所有 ES6 中的類的功能以外，還添加了一些新的用法。這一節主要介紹類的用法，下一節再介紹如何定義類的類型。 ## 類的概念雖然 JavaScript 中有類的概念，但是可能大多數 JavaScript 程序員并不是非常熟悉類，這里對類相關的概念做一個簡單的介紹。 - 類(Class)：定義了一件事物的抽象特點，包含它的屬性和方法 - 對象（Object）：類的實例，通過 `new` 生成 - 面向對象（OOP）的三大特性：封裝、繼承、多態 - 封裝（Encapsulation）：將對數據的操作細節隱藏起來，只暴露對外的接口。外界調用端不需要（也不可能）知道細節，就能通過對外提供的接口來訪問該對象，同時也保證了外界無法任意更改對象內部的數據 - 繼承（Inheritance）：子類繼承父類，子類除了擁有父類的所有特性外，還有一些更具體的特性 - 多態（Polymorphism）：由繼承而產生了相關的不同的類，對同一個方法可以有不同的響應。比如 `Cat` 和 `Dog` 都繼承自 `Animal`，但是分別實現了自己的 `eat` 方法。此時針對某一個實例，我們無需了解它是 `Cat` 還是 `Dog`，就可以直接調用 `eat` 方法，程序會自動判斷出來應該如何執行 `eat` - 存取器（getter & setter）：用以改變屬性的讀取和賦值行為 - 修飾符（Modifiers）：修飾符是一些關鍵字，用于限定成員或類型的性質。比如 `public` 表示公有屬性或方法 - 抽象類（Abstract Class）：抽象類是供其他類繼承的基類，抽象類不允許被實例化。抽象類中的抽象方法必須在子類中被實現 - 接口（Interfaces）：不同類之間公有的屬性或方法，可以抽象成一個接口。接口可以被類實現（implements）。一個類只能繼承自另一個類，但是可以實現多個接口 ## ES6 中類的用法下面我們先回顧一下 ES6 中類的用法，更詳細的介紹可以參考 [ECMAScript 6 入門 - Class]。 ### 屬性和方法使用 `class` 定義類，使用 `constructor` 定義構造函數。通過 `new` 生成新實例的時候，會自動調用構造函數。 ```js class Animal { constructor(name) { this.name = name; } sayHi() { return `My name is ${this.name}`; } } let a = new Animal('Jack'); console.log(a.sayHi()); // My name is Jack ``` ### 類的繼承使用 `extends` 關鍵字實現繼承，子類中使用 `super` 關鍵字來調用父類的構造函數和方法。 ```js class Cat extends Animal { constructor(name) { super(name); // 調用父類的 constructor(name) console.log(this.name); } sayHi() { return 'Meow, ' + super.sayHi(); // 調用父類的 sayHi() } } let c = new Cat('Tom'); // Tom console.log(c.sayHi()); // Meow, My name is Tom ``` ### 存取器使用 getter 和 setter 可以改變屬性的賦值和讀取行為： ```js class Animal { constructor(name) { this.name = name; } get name() { return 'Jack'; } set name(value) { console.log('setter: ' + value); } } let a = new Animal('Kitty'); // setter: Kitty a.name = 'Tom'; // setter: Tom console.log(a.name); // Jack ``` ### 靜態方法使用 `static` 修飾符修飾的方法稱為靜態方法，它們不需要實例化，而是直接通過類來調用： ```js class Animal { static isAnimal(a) { return a instanceof Animal; } } let a = new Animal('Jack'); Animal.isAnimal(a); // true a.isAnimal(a); // TypeError: a.isAnimal is not a function ``` ## ES7 中類的用法 ES7 中有一些關于類的提案，TypeScript 也實現了它們，這里做一個簡單的介紹。 ### 實例屬性 ES6 中實例的屬性只能通過構造函數中的 `this.xxx` 來定義，ES7 提案中可以直接在類里面定義： ```js class Animal { name = 'Jack'; constructor() { // ... } } let a = new Animal(); console.log(a.name); // Jack ``` ### 靜態屬性 ES7 提案中，可以使用 `static` 定義一個靜態屬性： ```js class Animal { static num = 42; constructor() { // ... } } console.log(Animal.num); // 42 ``` ## TypeScript 中類的用法 ### public private 和 protected TypeScript 可以使用三種訪問修飾符（Access Modifiers），分別是 `public`、`private` 和 `protected`。 - `public` 修飾的屬性或方法是公有的，可以在任何地方被訪問到，默認所有的屬性和方法都是 `public` 的 - `private` 修飾的屬性或方法是私有的，不能在聲明它的類的外部訪問 - `protected` 修飾的屬性或方法是受保護的，它和 `private` 類似，區別是它在子類中也是允許被訪問的下面舉一些例子： ```ts class Animal { public name; public constructor(name) { this.name = name; } } let a = new Animal('Jack'); console.log(a.name); // Jack a.name = 'Tom'; console.log(a.name); // Tom ``` 上面的例子中，`name` 被設置為了 `public`，所以直接訪問實例的 `name` 屬性是允許的。很多時候，我們希望有的屬性是無法直接存取的，這時候就可以用 `private` 了： ```ts class Animal { private name; public constructor(name) { this.name = name; } } let a = new Animal('Jack'); console.log(a.name); // Jack a.name = 'Tom'; // index.ts(9,13): error TS2341: Property 'name' is private and only accessible within class 'Animal'. // index.ts(10,1): error TS2341: Property 'name' is private and only accessible within class 'Animal'. ``` 需要注意的是，TypeScript 編譯之后的代碼中，并沒有限制 `private` 屬性在外部的可訪問性。上面的例子編譯后的代碼是： ```js var Animal = (function () { function Animal(name) { this.name = name; } return Animal; }()); var a = new Animal('Jack'); console.log(a.name); a.name = 'Tom'; ``` 使用 `private` 修飾的屬性或方法，在子類中也是不允許訪問的： ```ts class Animal { private name; public constructor(name) { this.name = name; } } class Cat extends Animal { constructor(name) { super(name); console.log(this.name); } } // index.ts(11,17): error TS2341: Property 'name' is private and only accessible within class 'Animal'. ``` 而如果是用 `protected` 修飾，則允許在子類中訪問： ```ts class Animal { protected name; public constructor(name) { this.name = name; } } class Cat extends Animal { constructor(name) { super(name); console.log(this.name); } } ``` 當構造函數修飾為 `private` 時，該類不允許被繼承或者實例化： ```ts class Animal { public name; private constructor (name) { this.name = name; } } class Cat extends Animal { constructor (name) { super(name); } } let a = new Animal('Jack'); // index.ts(7,19): TS2675: Cannot extend a class 'Animal'. Class constructor is marked as private. // index.ts(13,9): TS2673: Constructor of class 'Animal' is private and only accessible within the class declaration. ``` 當構造函數修飾為 `protected` 時，該類只允許被繼承： ```ts class Animal { public name; protected constructor (name) { this.name = name; } } class Cat extends Animal { constructor (name) { super(name); } } let a = new Animal('Jack'); // index.ts(13,9): TS2674: Constructor of class 'Animal' is protected and only accessible within the class declaration. ``` ### 參數屬性修飾符和`readonly`還可以使用在構造函數參數中，等同于類中定義該屬性同時給該屬性賦值，使代碼更簡潔。 ```ts class Animal { // public name: string; public constructor (public name) { // this.name = name; } } ``` ### readonly 只讀屬性關鍵字，只允許出現在屬性聲明或索引簽名或構造函數中。 ```ts class Animal { readonly name; public constructor(name) { this.name = name; } } let a = new Animal('Jack'); console.log(a.name); // Jack a.name = 'Tom'; // index.ts(10,3): TS2540: Cannot assign to 'name' because it is a read-only property. ``` 注意如果 `readonly` 和其他訪問修飾符同時存在的話，需要寫在其后面。 ```ts class Animal { // public readonly name; public constructor(public readonly name) { // this.name = name; } } ``` ### 抽象類 `abstract` 用于定義抽象類和其中的抽象方法。什么是抽象類？首先，抽象類是不允許被實例化的： ```ts abstract class Animal { public name; public constructor(name) { this.name = name; } public abstract sayHi(); } let a = new Animal('Jack'); // index.ts(9,11): error TS2511: Cannot create an instance of the abstract class 'Animal'. ``` 上面的例子中，我們定義了一個抽象類 `Animal`，并且定義了一個抽象方法 `sayHi`。在實例化抽象類的時候報錯了。其次，抽象類中的抽象方法必須被子類實現： ```ts abstract class Animal { public name; public constructor(name) { this.name = name; } public abstract sayHi(); } class Cat extends Animal { public eat() { console.log(`${this.name} is eating.`); } } let cat = new Cat('Tom'); // index.ts(9,7): error TS2515: Non-abstract class 'Cat' does not implement inherited abstract member 'sayHi' from class 'Animal'. ``` 上面的例子中，我們定義了一個類 `Cat` 繼承了抽象類 `Animal`，但是沒有實現抽象方法 `sayHi`，所以編譯報錯了。下面是一個正確使用抽象類的例子： ```ts abstract class Animal { public name; public constructor(name) { this.name = name; } public abstract sayHi(); } class Cat extends Animal { public sayHi() { console.log(`Meow, My name is ${this.name}`); } } let cat = new Cat('Tom'); ``` 上面的例子中，我們實現了抽象方法 `sayHi`，編譯通過了。需要注意的是，即使是抽象方法，TypeScript 的編譯結果中，仍然會存在這個類，上面的代碼的編譯結果是： ```js var __extends = (this && this.__extends) || function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; function __() { this.constructor = d; } d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); }; var Animal = (function () { function Animal(name) { this.name = name; } return Animal; }()); var Cat = (function (_super) { __extends(Cat, _super); function Cat() { _super.apply(this, arguments); } Cat.prototype.sayHi = function () { console.log('Meow, My name is ' + this.name); }; return Cat; }(Animal)); var cat = new Cat('Tom'); ``` ## 類的類型給類加上 TypeScript 的類型很簡單，與接口類似： ```ts class Animal { name: string; constructor(name: string) { this.name = name; } sayHi(): string { ? ? return `My name is ${this.name}`; } } let a: Animal = new Animal('Jack'); console.log(a.sayHi()); // My name is Jack ``` ## 參考 - [Classes](http://www.typescriptlang.org/docs/handbook/classes.html)（[中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Classes.html)） - [ECMAScript 6 入門 - Class] [ECMAScript 6 入門 - Class]: http://es6.ruanyifeng.com/#docs/class --- - [上一章：枚舉](enum.md) - [下一章：類與接口](class-and-interfaces.md)