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 式繼續

    原文作者:specialCoder
    原文地址: https://segmentfault.com/a/1190000015068063
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞