TS 類與接口

一 前言

1.在typescript上遇到過實例化對象的兩種寫法：implement和extends。extends很明顯就是ES6裏面的類繼承，那麼implement又是作什麼的呢？它和extends有什麼不一樣？

2.還有一個問題就是：typescript 有接口的概念，這個接口和類有什麼關係嗎？

帶着以上兩個問題咱們一塊兒看一下這篇文章。

二 正文

1.ts中interface與class的區別

interface:接口只聲明成員方法，不作實現。

class:類聲明並實現方法。

也就是說：interface只是定義了這個接口會有什麼，可是沒有告訴你具體是什麼。
例如：

interface Point {
    lng:number;
    lat:number;
    sayPosition():void;
}

Point interface 裏面包含數值類型的經緯度和一個sayPosition函數，可是具體內容沒有定義，須要你本身在子類中實現。

而class則是完整的實現：

class Point {
    constructor(lng,lat){
        this.lng = lng;
        this.lat = lat;
    }
    sayPosition(){
        console.log('point:',this.lng,this.lat);
    }
}

2.extends 與 implement

（1）extends是繼承父類，只要那個類不是聲明爲final或者那個類定義爲abstract的就能繼承。

（2）java中不支持多重繼承，可是能夠用接口來實現，這樣就要用到implements，繼承只能繼承一個類，但implements能夠實現多個接口，用逗號分開就好了
好比:

class A extends B implements C,D,E

在英文中：
implements 就是：實現的意思。
「implement是實現一個接口，要本身實現這個接口的方法」
implements就是實現的意思,顧名思義它實現一個已經定義好的接口中的方法！如：

public interface MyInterface{
    public String MyInterfaceMethod1ToReturnString();
    public void MyIntefaceMethod2();
    ......
    //在這裏定義一系列不須要實現的方法，其實現過程"延續到"他的子類中
}

實現接口方法：

public MyImplClass implements MyInterface{
    public String MyInterfaceMethod1ToReturnString(){
         return "My String here!";
    }
    public void MyIntefaceMethod2(){
         //Do something else here!
    }
}

3.ES6中使用Mixin實現「多重繼承」

熟悉 JavaScript 的同窗應該對 mixin 模式並不陌生。咱們說 JavaScript / ES5 的繼承模型是基於單一原型鏈的繼承模型，一般狀況下，在 JavaScript 實踐中徹底用原型鏈來實現繼承式的代碼複用，是遠遠不能知足需求的。所以實戰中，咱們的代碼抽象基本上都是採用混合的模式，既有原型繼承，也有 mixin 組合。

在 ES6 中，咱們能夠採用全新的基於類繼承的 「mixin」 模式設計更優雅的「語義化」接口，這是由於 ES6 中的 extends 能夠繼承動態構造的類，這一點和其餘的靜態聲明類的編程語言不一樣。

const Serializable = Sup => class extends Sup {
  constructor(...args){
    super(...args);
    if(typeof this.constructor.stringify !== "function"){
      throw new ReferenceError("Please define stringify method to the Class!");
    }
    if(typeof this.constructor.parse !== "function"){
      throw new ReferenceError("Please define parse method to the Class!");
    }
  }
  toString(){
    return this.constructor.stringify(this);
  }
}

class Person {
  constructor(name, age, gender){
    Object.assign(this, {name, age, gender});
  }
}

class Employee extends Serializable(Person){
  constructor(name, age, gender, level, salary){
    super(name, age, gender);
    this.level = level;
    this.salary = salary;
  }
  static stringify(employee){
    let {name, age, gender, level, salary} = employee;
    return JSON.stringify({name, age, gender, level, salary});
  }
  static parse(str){
    let {name, age, gender, level, salary} = JSON.parse(str);
    return new Employee(name, age, gender, level, salary);
  }
}

let employee = new Employee("jane",25,"f",1,1000);
let employee2 = Employee.parse(employee+""); //經過序列化反序列化複製對象

console.log(employee2, 
  employee2 instanceof Employee,  //true 
  employee2 instanceof Person,  //true
  employee == employee2);   //false

在上面的代碼裏，咱們改變了 Serializable，讓它成爲一個動態返回類型的函數，而後咱們經過 class Employ extends Serializable(Person) 來實現可序列化，在這裏咱們沒有可序列化 Person 自己，而將 Serializable 在語義上變成一種修飾，即 Employee 是一種可序列化的 Person。

三 後記

參考連接：
Classes
類的裝飾器：ES6 中優雅的 mixin 式繼承