TypeScript學(xué)習(xí)5-接口與類的應(yīng)用

OpenDigg 發(fā)布于2019-08-26 18:37 / 3508人閱讀

摘要：概述和對(duì)比接口和類在實(shí)際使用中，一般都是配合使用的。接口是一個(gè)對(duì)外的協(xié)商約定。我們先實(shí)現(xiàn)一個(gè)交通工具的抽象類，然后繼承實(shí)現(xiàn)輪船類。我們可以發(fā)現(xiàn)抽象類已經(jīng)實(shí)現(xiàn)的方法，子類是無(wú)需重復(fù)實(shí)現(xiàn)的。

概述和對(duì)比

接口和類在實(shí)際使用中，一般都是配合使用的。我們來(lái)對(duì)比一下：

接口可以聲明一個(gè)類的結(jié)構(gòu)，包含屬性和方法，但它只是給出一個(gè)聲明，沒有訪問(wèn)修飾符，沒有具體的方法實(shí)現(xiàn)，沒有構(gòu)造函數(shù)，也不可以被實(shí)例化。

接口是一個(gè)對(duì)外的協(xié)商、約定。繼承后才可以實(shí)例化，繼承的時(shí)候必須實(shí)現(xiàn)聲明。可以多重繼承。

類是也是聲明一個(gè)類的結(jié)構(gòu)，包含屬性和方法，有訪問(wèn)修飾符，有具體的方法實(shí)現(xiàn)，有構(gòu)造函數(shù)，可以實(shí)例化（抽象類下面說(shuō)）。繼承的時(shí)候，可以覆蓋，也可以繼承使用父類實(shí)現(xiàn)。

抽象類也是類，不過(guò)它可以包含接口類似的特性：普通方法包含實(shí)現(xiàn)，抽象方法是不包含實(shí)現(xiàn)的；抽象類不能實(shí)例化。繼承后才可以實(shí)例化，繼承的時(shí)候必須實(shí)現(xiàn)抽象聲明，其他聲明和普通類一樣。

補(bǔ)充說(shuō)明一下，這里的接口、類與純正的面向?qū)ο笳Z(yǔ)言Java比，有一些不同的地方，有興趣的可以自行了解。

接口與類的使用場(chǎng)景

這里將給一個(gè)稍微復(fù)雜一點(diǎn)的例子：旅行社運(yùn)送旅客。

定義接口

這里我們定義了幾類接口：旅客、載客、位置、運(yùn)送，目的就是聲明規(guī)范，實(shí)現(xiàn)了這些接口的類就可以被用來(lái)做這些事情。

// 旅客
interface Passgener {
    name: string;
}

// 載客
interface Carriable {
  passengers: Passgener[];
  getUp (...passengers: Passgener[]): number;
  getOff (): number;
}

// 位置
interface Positioned {
    x: number;
    y: number;
}

// 常量：初始位置
const positionOrigin: Positioned = { x: 0, y: 0 };

// 運(yùn)送
interface Moveable {
    position: Positioned;
    moveTo(Positioned: Positioned): Positioned;
}

實(shí)現(xiàn)具體類

這里我實(shí)現(xiàn)了兩個(gè)類：小汽車、巴士，這兩個(gè)類均實(shí)現(xiàn)了載客、運(yùn)送接口，也就是說(shuō)明它們是擁有這些能力的。

// 小汽車
class Car implements Carriable, Moveable {
  passengers: Passgener[];
  position: Positioned;
  capacity: number;

  constructor(capacity: number) {
    this.passengers = [];
    this.position = positionOrigin;
    this.capacity = capacity;
  }
  
  getUp (...passengers: Passgener[]): number {
    if (passengers.length > this.capacity) {
      throw new Error(`This car can carry ${this.capacity} passengers!`);
    }
    console.log(
            `This car carries ${passengers.map(item => item.name).join(",")}`
        );
    return this.passengers.push(...passengers);
  }

  getOff (): number {
    return this.passengers.splice(0).length;
  }

    moveTo(position: Positioned): Positioned {
        Object.assign(this.position, position);
        console.log(
            `This car carries ${this.passengers.map(item => item.name).join(",")} to [${
                this.position.x
            }, ${this.position.y}]`
        );
        return this.position;
    }
}

// 巴士
class Bus implements Carriable, Moveable {
  passengers: Passgener[];
  position: Positioned;
  capacity: number;

  constructor(capacity: number) {
    this.passengers = [];
    this.position = positionOrigin;
    this.capacity = capacity;
  }
  
  getUp (...passengers: Passgener[]): number {
    if (passengers.length > this.capacity) {
      throw new Error(`This Bus can carry ${this.capacity} passengers!`);
    }
    console.log(
            `This Bus carries ${passengers.map(item => item.name).join(",")}`
        );
    return this.passengers.push(...passengers);
  }

  getOff (): number {
    return this.passengers.splice(0).length;
  }

    moveTo(position: Positioned): Positioned {
    Object.assign(this.position, position);
    console.log(
            `This Bus carries ${this.passengers.map(item => item.name).join(",")} to [${
                this.position.x
            }, ${this.position.y}]`
        );
        return this.position;
    }
}

實(shí)現(xiàn)功能

具體類定義出來(lái)了，我們就可以實(shí)現(xiàn)功能，我們定義一個(gè)旅行社，由旅行社來(lái)運(yùn)送旅客。

// 旅行社
class TravelAgency {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  carrying (carrier: Carriable & Moveable, position: Positioned, ...passengers: Passgener[]): Positioned {
    carrier.getUp(...passengers);
    return carrier.moveTo(position);
  }

}

// 實(shí)例化對(duì)象
let t1 = new TravelAgency("t1");
let c1 = new Car(4);
let b1 = new Bus(30);

// 實(shí)現(xiàn)功能
t1.carrying(c1, {x: 10, y: 60}, {name: "Jack"}, {name: "Tom"});
t1.carrying(b1, {x: 10, y: 60}, {name: "Jack"}, {name: "Tom"}, {name: "Mary"}, {name: "Joe"});

抽象類的使用場(chǎng)景

上面已經(jīng)把完整的功能實(shí)現(xiàn)出來(lái)了，但是我們可以看到，Car和Bus的代碼還是有冗余的。這里我們就可以通過(guò)抽象類來(lái)做一些優(yōu)化。

我們先實(shí)現(xiàn)一個(gè)交通工具的抽象類，然后繼承實(shí)現(xiàn)輪船類。我們可以發(fā)現(xiàn)抽象類已經(jīng)實(shí)現(xiàn)的方法，子類是無(wú)需重復(fù)實(shí)現(xiàn)的。只有抽象出來(lái)的必須子類實(shí)現(xiàn)的才需要實(shí)現(xiàn)。

// 交通工具
abstract class Vehicle implements Carriable, Moveable {
  name: string;
  passengers: Passgener[];
    position: Positioned;
  capacity: number;
  
  // 抽象方法
  abstract run(speed: number): void;
  
  getUp (...passengers: Passgener[]): number {
    if (passengers.length > this.capacity) {
      throw new Error(`This ${this.name} can carry ${this.capacity} passengers!`);
    }
    console.log(
            `This ${this.name} carries ${passengers.map(item => item.name).join(",")}`
        );
    return this.passengers.push(...passengers);
  }

  getOff (): number {
    return this.passengers.splice(0).length;
  }

    moveTo(position: Positioned): Positioned {
        Object.assign(this.position, position);
        console.log(
            `This ${this.name} carries ${this.passengers.map(item => item.name).join(",")} to [${
                this.position.x
            }, ${this.position.y}]`
        );
        return this.position;
    }
}

// 輪船
class Ship extends Vehicle {
  constructor(capacity: number) {
    super();
        this.passengers = [];
        this.position = positionOrigin;
        this.capacity = capacity;
  }

  // 抽象方法必須實(shí)現(xiàn) 
  run(speed: number) {
    // todo, run as a ship...
    console.log(`This ${this.name} running at ${speed}km/h.`);
  }
}

到此介紹完了接口和類的基本使用場(chǎng)景，再次體會(huì)一下關(guān)鍵字：抽象、繼承。