[타입스크립트] 다형성(polymorphism)이 뭐가 좋은 것일까?

포스팅 제목의 해답은 아래 코드에 있다.

아래 코드를 보고도, 짐작하기 어렵다면 포스팅 가장 아래에 기재해두었다!

//힌트1

const machines = [
  new CoffeMachine(25, 25),
  new CafeLatteMachine(15, 25, 25, "S1"),
  new saltCoffeeMachine(5, 10),
  new CoffeMachine(25, 25),
  new CafeLatteMachine(15, 25, 25, "S1"),
  new saltCoffeeMachine(5, 10),
];

machines.forEach((machine) => {
  console.log("------------커피머신 가동~!------------");
  console.log(machine.makeCoffee(1));
});

 

힌트2

아래와 같이 커피머신 클래스와 카페라떼머신 클래스가 있다고 가정한다.

//   //커피머신 만들기
type CoffeeCup = {
  orderShot: number;
  hasMilk: boolean;
};

interface CoffeeMaker {
  makeCoffee(shots: number): CoffeeCup;
}

//위 인터페이스를 구현하는 클래스이다.
class CoffeMachine implements CoffeeMaker {
  private static ONE_SHOT_CAPSULE: number = 3;
  protected static ONE_CUP_WATER: number = 10;

  static makeMachine(beans: number, water: number): CoffeMachine {
    return new CoffeMachine(beans, water);
  }

  public constructor(
    protected capsule: number = 3,
    protected water: number = 10
  ) {}

  makeCoffee(orderShot: number): CoffeeCup {
    this.checkMaterials(orderShot);
    console.log("캡슐쓰기 전 " + this.capsule);
    this.useCapsule(orderShot);
    console.log("물쓰기 전 " + this.water);
    this.useWater();
    this.heatWater();
    return this.extract(orderShot);
  }

  protected checkMaterials(orderShot: number) {
    if (this.capsule < orderShot * CoffeMachine.ONE_SHOT_CAPSULE) {
      throw new Error(`커피캡슐 부족!!! 현재 보유 캡슐 : ${this.capsule}`);
    }
    if (this.water < CoffeMachine.ONE_CUP_WATER) {
      throw new Error(`물 부족!!! 남은 물 ${this.water}`);
    }
  }
  clean(): void {
    console.log("커피머신 행구는 중!");
  }

  private extract(shots: number): CoffeeCup {
    return {
      orderShot: shots,
      hasMilk: false,
    };
  }
  private heatWater() {
    console.log("물 끓이는 중...");
  }

  private useCapsule(shot: number) {
    console.log("캡슐쓰러왔습니다.");
    this.capsule -= shot * CoffeMachine.ONE_SHOT_CAPSULE;
    console.log("캡슐 쓰고 난 후" + this.capsule);
  }

  protected useWater() {
    console.log("물쓰러왔습니다.");
    this.water -= CoffeMachine.ONE_CUP_WATER;
    console.log("물쓰고 난 후 " + this.water);
  }

  addCapsule(capsule: number) {
    this.capsule += capsule;
  }

  fulfillWater(water: number) {
    this.water += water;
  }

  get Water(): number {
    return this.water;
  }

  get Capsule(): number {
    return this.capsule;
  }
}

// tslint:disable-next-line: max-classes-per-file
class CafeLatteMachine extends CoffeMachine {
  protected static ONE_CUP_WATER: number = 8;
  private static ONE_CUP_Milk: number = 2;

  public constructor(
    protected capsule: number = 3,
    protected water: number = 10,
    private milk: number,
    public readonly serialNumber: string
  ) {
    super(capsule, water);
  }

  makeCoffee(orderShot: number): CoffeeCup {
    const coffee = super.makeCoffee(orderShot); //기본적인 캡슐 소비, 물 소비, 물 가열 다 끝나고 완성된 커피가 반환
    //부모에서 받아온 커피 완성품에 우유만 부어주자!!!
    this.steamMilk();
    this.pourMilk();
    return { orderShot: orderShot, hasMilk: true };
  }

  //오버라이딩
  checkMaterials(orderShot: number) {
    super.checkMaterials(orderShot);
    if (this.milk < CafeLatteMachine.ONE_CUP_Milk) {
      throw new Error(`우유 부족!!! 현재 보유 우유량 : ${this.milk}`);
    }
  }
  useWater() {
    console.log("물쓰러왔습니다.");
    this.water -= CafeLatteMachine.ONE_CUP_WATER;
    console.log("물쓰고 난 후 " + this.water);
  }

  private steamMilk(): void {
    console.log("우유 데우는 중...");
  }

  private pourMilk() {
    console.log("우유 붓는 중...");
    this.milk -= CafeLatteMachine.ONE_CUP_Milk;
    console.log("우유 붓고 난 뒤 " + this.milk);
  }

  public fulfillMilk(milk: number) {
    this.milk += milk;
  }

  get Milk(): number {
    return this.milk;
  }
}

 

클래스 구동 여부는 아래 콘솔들로 찍어보면 잘 돌아가는 것을 확인할 수 있다.

 

const machine = new CoffeMachine(100, 100);
const latteMachine = new CafeLatteMachine(100, 100, 2, "1S");

const latte1 = latteMachine.makeCoffee(10);
console.log("첫번째 라떼...두구두구두구...");
console.log(latte1);

console.log("지금 우유 상태는? : " + latteMachine.Milk);
console.log("우유가 없으니까 충전해주자");
latteMachine.fulfillMilk(2);

const latte2 = latteMachine.makeCoffee(10);
console.log("두번째 라떼~~~");
console.log(latte2);

const latte3 = latteMachine.makeCoffee(10);
console.log("우유가 없는 상태에서 세번째 라떼를 만들려고 하면~~?");
console.log(latte3);
console.log(latteMachine.serialNumber);

 

 

여기에 소금이 들어가는 소금 커피머신도 만들어본다.

 

이처럼 다형성을 이용하면 한가지의 인터페이스나, 한가지의 클래스를 통해서 다른 방식으로 구현한 클래스를 또 설계할 수 있다.

이러한 다형성의 장점을 두눈으로 똑똑히 확일해 볼 타이밍이 다가왔다.

 

이렇게 여러가지 커피머신들(클래스를 생성하면 인스턴스, 곧 해당 코드에서는 커피머신 :_)이 들어있는 배열이 있다고 치자.

const machines = [
  new CoffeMachine(25, 25),
  new CafeLatteMachine(15, 25, 25, "S1"),
  new saltCoffeeMachine(5, 10),
  new CoffeMachine(25, 25),
  new CafeLatteMachine(15, 25, 25, "S1"),
  new saltCoffeeMachine(5, 10),
];

다형성 최고의 장점!

바로 이 machines를 빙글빙글 돌면서 각각의 머신들을 프로퍼티(혹은 함수)를 받아와서 제어할 수 있다는 점이다!

const machines = [
  new CoffeMachine(25, 25),
  new CafeLatteMachine(15, 25, 25, "S1"),
  new saltCoffeeMachine(5, 10),
  new CoffeMachine(25, 25),
  new CafeLatteMachine(15, 25, 25, "S1"),
  new saltCoffeeMachine(5, 10),
];

machines.forEach((machine) => {
  console.log("------------커피머신 가동~!------------");
  console.log(machine.makeCoffee(1));
});

<출력결과> 이렇게 배열에 있는 모든 커피머신들에 접근하면서 같은 함수를 잘 실행하는 것을 확인할 수 있다.

------------커피머신 가동~!------------
캡슐쓰기 전 25
캡슐쓰러왔습니다.
캡슐 쓰고 난 후22
물쓰기 전 25
물쓰러왔습니다.
물쓰고 난 후 15
물 끓이는 중...
{ orderShot: 1, hasMilk: false }
------------커피머신 가동~!------------
캡슐쓰기 전 15
캡슐쓰러왔습니다.
캡슐 쓰고 난 후12
물쓰기 전 25
물쓰러왔습니다.
물쓰고 난 후 17
물 끓이는 중...
우유 데우는 중...
우유 붓는 중...
우유 붓고 난 뒤 23
{ orderShot: 1, hasMilk: true }
------------커피머신 가동~!------------
캡슐쓰기 전 5
캡슐쓰러왔습니다.
캡슐 쓰고 난 후2
물쓰기 전 10
물쓰러왔습니다.
물쓰고 난 후 0
물 끓이는 중...
{ orderShot: 1, hasMilk: false, hasSalt: true }
------------커피머신 가동~!------------
캡슐쓰기 전 25
캡슐쓰러왔습니다.
캡슐 쓰고 난 후22
물쓰기 전 25
물쓰러왔습니다.
물쓰고 난 후 15
물 끓이는 중...
{ orderShot: 1, hasMilk: false }
------------커피머신 가동~!------------
캡슐쓰기 전 15
캡슐쓰러왔습니다.
캡슐 쓰고 난 후12
물쓰기 전 25
물쓰러왔습니다.
물쓰고 난 후 17
물 끓이는 중...
우유 데우는 중...
우유 붓는 중...
우유 붓고 난 뒤 23
{ orderShot: 1, hasMilk: true }
------------커피머신 가동~!------------
캡슐쓰기 전 5
캡슐쓰러왔습니다.
캡슐 쓰고 난 후2
물쓰기 전 10
물쓰러왔습니다.
물쓰고 난 후 0
물 끓이는 중...
{ orderShot: 1, hasMilk: false, hasSalt: true }

 

이처럼 다형성의 장점은 다양한 클래스들이 한가지 인터페이스를 구현하거나 또는 동일한 부모클래스를 상속받은 상태라면,

공통 API를 위의 예시처럼 호출할 수도 있는 것이다.

 

 

위 캡처가 가능한 이유

TSC가 machines를 CoffeeMachine[] 로 이미 추론이 끝났기 때문이다!

여기서 더 기가 막힌 것은,

 

카페라떼머신과 소금커피머신은 커피머신이다. (클래스 상속받았으니까) 커피머신은 커피메이커(인터페이스)이다. (인터페이스 구현했으니까) 그렇다면 카페라떼머신과 소금커피머신 역시 커피메이커이다. 이 이론적인 사실을 통해 인터페이스 기준으로 공통API 제한을 걸어줄 수도 있다는 뜻이다.

 

배열의 타입을 인터페이스 배열로 제한을 걸어주면!

const machines: CoffeeMaker[] = [
  new CoffeMachine(25, 25),
  new CafeLatteMachine(15, 25, 25, "S1"),
  new saltCoffeeMachine(5, 10),
  new CoffeMachine(25, 25),
  new CafeLatteMachine(15, 25, 25, "S1"),
  new saltCoffeeMachine(5, 10),
];

아래 캡쳐와 같이 호출할 수 있는 공통API는 인터페이스에 규약되어있는 함수 뿐이다.

 

이처럼 다형성이란, 하나의 인터페이스나 또는 같은 부모의 클래스를 상속한 자식클래스들이,

공통 인터페이스 혹은 같은 부모 클래스에 있는 함수들을 다른 방식으로 다양하게 구현할 수 있는 것을 말한다!!!

  

이렇게 공통 인터페이스 혹은 같은 부모 클래스에 있는 함수를 호출하는 과정에서,

개발자는 각 클래스들의 세부적인 내부 구현사항을 신경쓰지 않고 공통 API만을 보고 뽑아 쓸 수 있게 되니 사용시에도 간편함을 느낄 수 있다.

 

 

 

<본 포스팅에 활용한 최종 소스 코드>

//   //커피머신 만들기
type CoffeeCup = {
  orderShot: number;
  hasMilk?: boolean;
  hasSalt?: boolean;
};

interface CoffeeMaker {
  makeCoffee(shots: number): CoffeeCup;
}

// CoffeeMaker 인터페이스를 구현하는 CoffeMachine 클래스이다.
class CoffeMachine implements CoffeeMaker {
  private static ONE_SHOT_CAPSULE: number = 3;
  protected static ONE_CUP_WATER: number = 10;

  static makeMachine(beans: number, water: number): CoffeMachine {
    return new CoffeMachine(beans, water);
  }

  public constructor(
    protected capsule: number = 3,
    protected water: number = 10
  ) {}

  makeCoffee(orderShot: number): CoffeeCup {
    this.checkMaterials(orderShot);
    console.log("캡슐쓰기 전 " + this.capsule);
    this.useCapsule(orderShot);
    console.log("물쓰기 전 " + this.water);
    this.useWater();
    this.heatWater();
    return this.extract(orderShot);
  }

  protected checkMaterials(orderShot: number) {
    if (this.capsule < orderShot * CoffeMachine.ONE_SHOT_CAPSULE) {
      throw new Error(`커피캡슐 부족!!! 현재 보유 캡슐 : ${this.capsule}`);
    }
    if (this.water < CoffeMachine.ONE_CUP_WATER) {
      throw new Error(`물 부족!!! 남은 물 ${this.water}`);
    }
  }
  clean(): void {
    console.log("커피머신 행구는 중!");
  }

  private extract(shots: number): CoffeeCup {
    return {
      orderShot: shots,
      hasMilk: false,
    };
  }
  private heatWater() {
    console.log("물 끓이는 중...");
  }

  private useCapsule(shot: number) {
    console.log("캡슐쓰러왔습니다.");
    this.capsule -= shot * CoffeMachine.ONE_SHOT_CAPSULE;
    console.log("캡슐 쓰고 난 후" + this.capsule);
  }

  protected useWater() {
    console.log("물쓰러왔습니다.");
    this.water -= CoffeMachine.ONE_CUP_WATER;
    console.log("물쓰고 난 후 " + this.water);
  }

  addCapsule(capsule: number) {
    this.capsule += capsule;
  }

  fulfillWater(water: number) {
    this.water += water;
  }

  get Water(): number {
    return this.water;
  }

  get Capsule(): number {
    return this.capsule;
  }
}

// CoffeMachine 클래스를 상속받은 CafeLatteMachine 클래스이다.
class CafeLatteMachine extends CoffeMachine {
  protected static ONE_CUP_WATER: number = 8;
  private static ONE_CUP_Milk: number = 2;

  public constructor(
    protected capsule: number = 3,
    protected water: number = 10,
    private milk: number,
    public readonly serialNumber: string
  ) {
    super(capsule, water);
  }

  makeCoffee(orderShot: number): CoffeeCup {
    const coffee = super.makeCoffee(orderShot); //기본적인 캡슐 소비, 물 소비, 물 가열 다 끝나고 완성된 커피가 반환
    //부모에서 받아온 커피 완성품에 우유만 부어주자!!!
    this.steamMilk();
    this.pourMilk();
    return { orderShot: orderShot, hasMilk: true };
  }

  //오버라이딩
  checkMaterials(orderShot: number) {
    super.checkMaterials(orderShot);
    if (this.milk < CafeLatteMachine.ONE_CUP_Milk) {
      throw new Error(`우유 부족!!! 현재 보유 우유량 : ${this.milk}`);
    }
  }
  useWater() {
    console.log("물쓰러왔습니다.");
    this.water -= CafeLatteMachine.ONE_CUP_WATER;
    console.log("물쓰고 난 후 " + this.water);
  }

  private steamMilk(): void {
    console.log("우유 데우는 중...");
  }

  private pourMilk() {
    console.log("우유 붓는 중...");
    this.milk -= CafeLatteMachine.ONE_CUP_Milk;
    console.log("우유 붓고 난 뒤 " + this.milk);
  }

  public fulfillMilk(milk: number) {
    this.milk += milk;
  }

  get Milk(): number {
    return this.milk;
  }
}

// CoffeMachine 클래스를 상속받은 saltCoffeeMachine 클래스이다.
class saltCoffeeMachine extends CoffeMachine {
  //..
  makeCoffee(orderShot: number): CoffeeCup {
    const coffee = super.makeCoffee(orderShot);
    return {
      ...coffee,
      hasSalt: true,
    };
  }
}

const machines: CoffeeMaker[] = [
  new CoffeMachine(25, 25),
  new CafeLatteMachine(15, 25, 25, "S1"),
  new saltCoffeeMachine(5, 10),
  new CoffeMachine(25, 25),
  new CafeLatteMachine(15, 25, 25, "S1"),
  new saltCoffeeMachine(5, 10),
];

machines.forEach((machine) => {
  console.log("------------커피머신 가동~!------------");
  console.log(machine.makeCoffee(1));
});

const machine = new CoffeMachine(100, 100);
const latteMachine = new CafeLatteMachine(100, 100, 2, "1S");

const latte1 = latteMachine.makeCoffee(10);
console.log("첫번째 라떼...두구두구두구...");
console.log(latte1);

console.log("지금 우유 상태는? : " + latteMachine.Milk);
console.log("우유가 없으니까 충전해주자");
latteMachine.fulfillMilk(2);

const latte2 = latteMachine.makeCoffee(10);
console.log("두번째 라떼~~~");
console.log(latte2);

const latte3 = latteMachine.makeCoffee(10);
console.log("우유가 없는 상태에서 세번째 라떼를 만들려고 하면~~?");
console.log(latte3);
console.log(latteMachine.serialNumber);

<출력결과>

------------커피머신 가동~!------------
캡슐쓰기 전 25
캡슐쓰러왔습니다.
캡슐 쓰고 난 후22
물쓰기 전 25
물쓰러왔습니다.
물쓰고 난 후 15
물 끓이는 중...
{ orderShot: 1, hasMilk: false }
------------커피머신 가동~!------------
캡슐쓰기 전 15
캡슐쓰러왔습니다.
캡슐 쓰고 난 후12
물쓰기 전 25
물쓰러왔습니다.
물쓰고 난 후 17
물 끓이는 중...
우유 데우는 중...
우유 붓는 중...
우유 붓고 난 뒤 23
{ orderShot: 1, hasMilk: true }
------------커피머신 가동~!------------
캡슐쓰기 전 5
캡슐쓰러왔습니다.
캡슐 쓰고 난 후2
물쓰기 전 10
물쓰러왔습니다.
물쓰고 난 후 0
물 끓이는 중...
{ orderShot: 1, hasMilk: false, hasSalt: true }
------------커피머신 가동~!------------
캡슐쓰기 전 25
캡슐쓰러왔습니다.
캡슐 쓰고 난 후22
물쓰기 전 25
물쓰러왔습니다.
물쓰고 난 후 15
물 끓이는 중...
{ orderShot: 1, hasMilk: false }
------------커피머신 가동~!------------
캡슐쓰기 전 15
캡슐쓰러왔습니다.
캡슐 쓰고 난 후12
물쓰기 전 25
물쓰러왔습니다.
물쓰고 난 후 17
물 끓이는 중...
우유 데우는 중...
우유 붓는 중...
우유 붓고 난 뒤 23
{ orderShot: 1, hasMilk: true }
------------커피머신 가동~!------------
캡슐쓰기 전 5
캡슐쓰러왔습니다.
캡슐 쓰고 난 후2
물쓰기 전 10
물쓰러왔습니다.
물쓰고 난 후 0
물 끓이는 중...
{ orderShot: 1, hasMilk: false, hasSalt: true }
캡슐쓰기 전 100
캡슐쓰러왔습니다.
캡슐 쓰고 난 후70
물쓰기 전 100
물쓰러왔습니다.
물쓰고 난 후 92
물 끓이는 중...
우유 데우는 중...
우유 붓는 중...
우유 붓고 난 뒤 0
첫번째 라떼...두구두구두구...
{ orderShot: 10, hasMilk: true }
지금 우유 상태는? : 0
우유가 없으니까 충전해주자
캡슐쓰기 전 70
캡슐쓰러왔습니다.
캡슐 쓰고 난 후40
물쓰기 전 92
물쓰러왔습니다.
물쓰고 난 후 84
물 끓이는 중...
우유 데우는 중...
우유 붓는 중...
우유 붓고 난 뒤 0
두번째 라떼~~~
{ orderShot: 10, hasMilk: true }
/Users/유저명^_^/Desktop/프젝명^__^/dist/index.js:87
            throw new Error(`우유 부족!!! 현재 보유 우유량 : ${this.milk}`);
            ^

Error: 우유 부족!!! 현재 보유 우유량 : 0