更新类与接口章节，详细说明接口继承类的原理

Author: xcatliu

.vscode/settings.json

@@ -3,21 +3,8 @@
     "editor.tabSize": 4,
     "editor.formatOnSave": true,
     "typescript.tsdk": "node_modules/typescript/lib",
-    "eslint.autoFixOnSave": false,
-    "eslint.validate": [
-        "javascript",
-        "javascriptreact",
-        {
-            "language": "vue",
-            "autoFix": false
-        },
-        {
-            "language": "typescript",
-            "autoFix": false
-        },
-        {
-            "language": "typescriptreact",
-            "autoFix": false
-        }
-    ]
+    "editor.codeActionsOnSave": {
+        "source.fixAll": true
+    },
+    "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "vue"]
 }

advanced/class-and-interfaces.md

@@ -12,7 +12,7 @@
 
 ```ts
 interface Alarm {
-    alert();
+    alert(): void;
 }
 
 class Door {
@@ -35,12 +35,12 @@ class Car implements Alarm {
 
 ```ts
 interface Alarm {
-    alert();
+    alert(): void;
 }
 
 interface Light {
-    lightOn();
-    lightOff();
+    lightOn(): void;
+    lightOff(): void;
 }
 
 class Car implements Alarm, Light {
@@ -64,25 +64,29 @@ class Car implements Alarm, Light {
 
 ```ts
 interface Alarm {
-    alert();
+    alert(): void;
 }
 
 interface LightableAlarm extends Alarm {
-    lightOn();
-    lightOff();
+    lightOn(): void;
+    lightOff(): void;
 }
 ```
 
-上例中，我们使用 `extends` 使 `LightableAlarm` 继承 `Alarm`。
+这很好理解，`LightableAlarm` 继承了 `Alarm`，除了拥有 `alert` 方法之外，还拥有两个新方法 `lightOn` 和 `lightOff`。
 
 ## 接口继承类
 
-接口也可以继承类：
+常见的面向对象语言中，接口是不能继承类的，但是在 TypeScript 中却是可以的：
 
 ```ts
 class Point {
     x: number;
     y: number;
+    constructor(x: number, y: number) {
+        this.x = x;
+        this.y = y;
+    }
 }
 
 interface Point3d extends Point {
@@ -92,43 +96,144 @@ interface Point3d extends Point {
 let point3d: Point3d = {x: 1, y: 2, z: 3};
 ```
 
-## 混合类型
+为什么 TypeScript 能够支持接口继承类呢？
+
+实际上，当我们在声明 `class Point` 时，除了会创建一个名为 `Point` 的类之外，同时也创建了一个名为 `Point` 的类型（实例的类型）。
+
+所以我们既可以将 `Point` 当做一个类来用（使用 `new` 创建它的实例）：
+
+```ts
+class Point {
+    x: number;
+    y: number;
+    constructor(x: number, y: number) {
+        this.x = x;
+        this.y = y;
+    }
+}
+
+const p = new Point(1, 2);
+```
+
+也可以将 `Point` 当做一个类型来用（使用 `: Point` 表示参数的类型）：
+
+```ts
+class Point {
+    x: number;
+    y: number;
+    constructor(x: number, y: number) {
+        this.x = x;
+        this.y = y;
+    }
+}
+
+function printPoint(p: Point) {
+    console.log(p.x, p.y);
+}
+
+const p = new Point(1, 2);
+
+printPoint(p);
+```
+
+这个例子实际上可以等价于：
+
+```ts
+class Point {
+    x: number;
+    y: number;
+    constructor(x: number, y: number) {
+        this.x = x;
+        this.y = y;
+    }
+}
+
+interface PointInstanceType {
+    x: number;
+    y: number;
+}
+
+function printPoint(p: PointInstanceType) {
+    console.log(p.x, p.y);
+}
+
+const p = new Point(1, 2);
+
+printPoint(p);
+```
+
+上例中我们新声明的 `PointInstanceType` 类型，与声明 `class Point` 时创建的 `Point` 类型是等价的。
 
-[之前学习过](../basics/type-of-function.md#接口中函数的定义)，可以使用接口的方式来定义一个函数需要符合的形状：
+所以回到 `Point3d` 的例子中，我们就能很容易的理解为什么 TypeScript 能够支持接口继承类了：
 
 ```ts
-interface SearchFunc {
-    (source: string, subString: string): boolean;
+class Point {
+    x: number;
+    y: number;
+    constructor(x: number, y: number) {
+        this.x = x;
+        this.y = y;
+    }
+}
+
+interface PointInstanceType {
+    x: number;
+    y: number;
 }
 
-let mySearch: SearchFunc;
-mySearch = function(source: string, subString: string) {
-    return source.search(subString) !== -1;
+// 等价于 interface Point3d extends PointInstanceType
+interface Point3d extends Point {
+    z: number;
 }
+
+let point3d: Point3d = {x: 1, y: 2, z: 3};
 ```
 
-有时候，一个函数还可以有自己的属性和方法：
+当我们声明 `interface Point3d extends Point` 时，`Point3d` 继承的实际上是类 `Point` 的实例的类型。
+
+换句话说，我们实际上是定义了一个接口 `Point3d` 继承另一个接口 `PointInstanceType`。
+
+所以这种用法和接口继承接口没有什么本质的区别。
+
+值得注意的是，`PointInstanceType` 相比于 `Point`，缺少了 `constructor` 方法，这是因为声明 `Point` 类时创建的 `Point` 类型是不包含构造函数的。另外，除了构造函数是不包含的，静态属性/方法也是不包含的（实例的类型当然不应该包括构造函数和静态属性/方法）：
 
 ```ts
-interface Counter {
-    (start: number): string;
-    interval: number;
-    reset(): void;
+class Point {
+    /** 静态属性，坐标系原点 */
+    static origin = new Point(0, 0);
+    /** 静态方法，计算与原点距离 */
+    static distanceToOrigin(p: Point) {
+        return 
+    }
+    /** 实例属性，x 轴的值 */
+    x: number;
+    /** 实例属性，y 轴的值 */
+    y: number;
+    /** 构造函数 */
+    constructor(x: number, y: number) {
+        this.x = x;
+        this.y = y;
+    }
+    /** 实例方法，打印此点 */
+    printPoint() {
+        console.log(this.x, this.y);
+    }
 }
 
-function getCounter(): Counter {
-    let counter = <Counter>function (start: number) { };
-    counter.interval = 123;
-    counter.reset = function () { };
-    return counter;
+interface PointInstanceType {
+    x: number;
+    y: number;
+    printPoint(): void;
 }
 
-let c = getCounter();
-c(10);
-c.reset();
-c.interval = 5.0;
+let p1: Point;
+let p2: PointInstanceType;
 ```
 
+上例中最后的类型 `Point` 和类型 `PointInstanceType` 是等价的。
+
+所以在接口继承类的时候，也只会继承它的实例属性/方法。
+
 ## 参考
 
 - [Interfaces](http://www.typescriptlang.org/docs/handbook/interfaces.html)（[中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Interfaces.html)）