[타입스크립트] 커피머신클래스 <-상속- 카페라떼머신클래스

728x90

커피머신 클래스가 다음과 같이 있다.

type CoffeeCup = {
  orderShot: number;
  hasMilk: boolean;
};

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


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

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

  constructor(private capsule: number = 3, private 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);
  }

  private 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);
  }

  private 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;
  }
}

카페라테머신 클래스도 만들어준다.

커피머신 클래스 내용 쭈욱 복붙해준 다음에

//return this.extract(orderShot); 요 코드 주석처리 해주고

return { ...coffee, hasMilk: true }; 요 코드로 변경해주고

스태틱 변수 앞에 식별자를 카페라떼머신으로 싹 다 바꿔주면

ex)

CoffeMachine.ONE_SHOT_CAPSULE ->

CafeLatteMachine.ONE_SHOT_CAPSULE

class CafeLatteMachine {
  private static ONE_SHOT_CAPSULE: number = 3;
  private static ONE_CUP_WATER: number = 10;

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

  constructor(private capsule: number = 3, private 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();
    let coffee = this.extract(orderShot);
    return { ...coffee, hasMilk: true };
    //return this.extract(orderShot);
  }

  private checkMaterials(orderShot: number) {
    if (this.capsule < orderShot * CafeLatteMachine.ONE_SHOT_CAPSULE) {
      throw new Error(`커피캡슐 부족!!! 현재 보유 캡슐 : ${this.capsule}`);
    }
    if (this.water < CafeLatteMachine.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 * CafeLatteMachine.ONE_SHOT_CAPSULE;
    console.log("캡슐 쓰고 난 후" + this.capsule);
  }

  private useWater() {
    console.log("물쓰러왔습니다.");
    this.water -= CafeLatteMachine.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;
  }
}

...

코드를 같이 보면 엄청 길고, 코드 중복도 심하다(더럽다!)

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

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

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

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

  constructor(private capsule: number = 3, private 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);
  }

  private 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);
  }

  private 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;
  }
}

const maker: CoffeMachine = CoffeMachine.makeMachine(32, 100);

//아마추어와 프로는 동일한 커피머신을 받았음에도 불구하고,
//amateur는 클래스AmateurUser가 인자를 받을 때 CoffeeMaker 인터페이스를 기준으로 받아오고,
//pro는 클래스ProBarista가 인자를 받을 때 CommercialCoffeeMaker 안토패아수룰 기준으로 받아오기 때문에,
//각각 인터페이스에 제약된 항목들만 쓸 수 있게된다.(순식간에 가용 범위가 달라짐!!!)

console.log("/* 첫번째 주문 */");
let normalMachine = new CoffeMachine(10, 10);
console.log(normalMachine.Water); //10
console.log(normalMachine.Capsule); //10
let order1 = normalMachine.makeCoffee(2);
console.log(order1); //{ orderShot: 2 }
console.log("물 상태" + normalMachine.Water); //0
console.log("캡슐 상태" + normalMachine.Capsule); //4

console.log("/* 두번째 주문 */");
normalMachine.fulfillWater(100);
let order2 = normalMachine.makeCoffee(1);
console.log(order2); //{ orderShot: 1 }
console.log("물 상태" + normalMachine.Water); //90
console.log("캡슐 상태" + normalMachine.Capsule); //1

console.log("/* 세번째 주문 */");
let order3 = normalMachine.makeCoffee(3);
console.log(order3); //Error: 커피캡슐 부족!!! 현재 보유 캡슐 : 1

class CafeLatteMachine {
  private static ONE_SHOT_CAPSULE: number = 3;
  private static ONE_CUP_WATER: number = 10;

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

  constructor(private capsule: number = 3, private 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();
    let coffee = this.extract(orderShot);
    return { ...coffee, hasMilk: true };
    //return this.extract(orderShot);
  }

  private checkMaterials(orderShot: number) {
    if (this.capsule < orderShot * CafeLatteMachine.ONE_SHOT_CAPSULE) {
      throw new Error(`커피캡슐 부족!!! 현재 보유 캡슐 : ${this.capsule}`);
    }
    if (this.water < CafeLatteMachine.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 * CafeLatteMachine.ONE_SHOT_CAPSULE;
    console.log("캡슐 쓰고 난 후" + this.capsule);
  }

  private useWater() {
    console.log("물쓰러왔습니다.");
    this.water -= CafeLatteMachine.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;
  }
}

문제상황을 고치기 위한 이제부터 '상속'을 본격적으로 도입해본다.

상속을 통해 코드의 재사용성을 높여보자

클래스 상속은 extends 키워드,

인터페이스 상속은 implements 키워드를 써야한다.

class CafeLatteMachine extends CoffeMachine {}

1. 카페라떼머신은 커피머신을 상속한다.

2. 커피머신 생성자 앞에 public 혹은 protected 키워드 기재

<일단락된 코드>

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

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

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

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

  public constructor(private capsule: number = 3, private 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);
  }

  private 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);
  }

  private 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;
  }
}

class CafeLatteMachine extends CoffeMachine {}

const machine = new CoffeMachine(100, 100);
const latteMachine = new CafeLatteMachine(100, 100);

const machine = new CoffeMachine(100, 100);
const latteMachine = new CafeLatteMachine(100, 100);
const latte = latteMachine.makeCoffee(10);
console.log(latte);

<출력결과> //참고로 물은 샷에 상관없이 한잔이면 무조건 -10(내가 만들었는데 잠시 헷갈...)

캡슐쓰기 전 100
캡슐쓰러왔습니다.
캡슐 쓰고 난 후70
물쓰기 전 100
물쓰러왔습니다.
물쓰고 난 후 90
물 끓이는 중...
{ orderShot: 10, hasMilk: false } // 당연히 아직 밀크는 들어가지 않은 그냥 커피가 나왔다~ 이제 이걸 고쳐주자

자식클래스에서 부모클래스에 있는 함수를 덮어씌울 수가 있다. 이것이 바로 오버라이딩(오버라이팅)이다.

class CafeLatteMachine extends CoffeMachine {
  makeCoffee(orderShot: number): CoffeeCup {
    this.checkMaterials(orderShot);
    console.log("캡슐쓰기 전 " + this.capsule);
    this.useCapsule(orderShot);
    console.log("물쓰기 전 " + this.water);
    this.useWater();
    this.heatWater();
    let latte = this.extract(orderShot);
    return { ...latte, hasMilk: true };
  }
}

일단은 위와 같이 변경하면 뭔가 이상하지 않은가?

또 코드중복이다!

이럴 때, super라는 것을 이용하면 된다.

부모에서 만들어진 커피의 리턴값인 객체의 hasMilk 프로퍼티 boolean값만 바꿔주기 위하여 아래와 같이 변경해서 작성해준다.

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

const machine = new CoffeMachine(100, 100);
const latteMachine = new CafeLatteMachine(100, 100);
const latte = latteMachine.makeCoffee(10);
console.log(latte);

<출력결과> 계획대로... 훌륭한 출력 결과

캡슐쓰기 전 100
캡슐쓰러왔습니다.
캡슐 쓰고 난 후70
물쓰기 전 100
물쓰러왔습니다.
물쓰고 난 후 90
물 끓이는 중...
{ orderShot: 10, hasMilk: true }

하지만 단순히 프로퍼티를 변경하는 것보다는

가열된Milk를 따로 넣어주는 함수를 카페라떼 머신이 추가해주는 것이 더 멋있지 않을까?

추가한 뒤, 아래 전체 소스코드 한번 기록해넣고, 이어서 작업해보도록 한다.

<여기까지 진행된 소스코드>

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

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

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

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

  public constructor(private capsule: number = 3, private 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);
  }

  private 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);
  }

  private 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 {
  makeCoffee(orderShot: number): CoffeeCup {
    const coffee = super.makeCoffee(orderShot); //기본적인 캡슐 소비, 물 소비, 물 가열 다 끝나고 완성된 커피가 반환
    //부모에서 받아온 커피 완성품에 우유만 부어주자!!!
    this.steamMilk();
    this.pourMilk();
    return { ...coffee, hasMilk: true };
  }
  private steamMilk(): void {
    console.log("우유 데우는 중...");
  }
  private pourMilk() {
    console.log("우유 붓는 중...");
  }
}

const machine = new CoffeMachine(100, 100);
const latteMachine = new CafeLatteMachine(100, 100);
const latte = latteMachine.makeCoffee(10);
console.log(latte);

<출력 결과> //부모에서 한 동작들을 전부 그대로 한 다음에, 우유 데우고, 우유 부어서 hasMilk가 ture인 진짜 카페라떼가 완성되었다!

캡슐쓰기 전 100
캡슐쓰러왔습니다.
캡슐 쓰고 난 후70
물쓰기 전 100
물쓰러왔습니다.
물쓰고 난 후 90
물 끓이는 중...
우유 데우는 중...
우유 붓는 중...
{ orderShot: 10, hasMilk: true }

음... 그런데 여기서 우유란 속성에 대하여 콘솔 로그만 찍지 말고

실질적으로 카페라떼 머신에 우유를 담을 수 있어서, 우유를 채워넣고, 우유가 부족하면 에러를 던지게끔...

한마디로 더욱 살아있는 자식클래스로 바꿀 순 없을까?

시도해보자.

<최종 소스코드> : 생성자 오버라이딩 및 여러가지 함수 오버라이딩 진행!

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

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

//위 인터페이스를 구현하는 클래스이다.
class CoffeMachine implements CoffeeMaker {
  private static ONE_SHOT_CAPSULE: number = 3;
  private 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);
  }

  private 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 {
  private static ONE_CUP_Milk: number = 2;
  public constructor(
    protected capsule: number = 3,
    protected water: number = 10,
    private milk: number
  ) {
    super(capsule, water);
  }

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

  //오버라이딩
  checkMaterials(orderShot: number) {
    super.checkMaterials(orderShot);
    if (this.milk < CafeLatteMachine.ONE_CUP_Milk) {
      throw new Error(`우유 부족!!! 현재 보유 우유량 : ${this.milk}`);
    }
  }

  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);

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);

<출력결과>

캡슐쓰기 전 100
캡슐쓰러왔습니다.
캡슐 쓰고 난 후70
물쓰기 전 100
물쓰러왔습니다.
물쓰고 난 후 90
물 끓이는 중...
우유 데우는 중...
우유 붓는 중...
우유 붓고 난 뒤 0
첫번째 라떼...두구두구두구...
{ orderShot: 10, hasMilk: true }
지금 우유 상태는? : 0
우유가 없으니까 충전해주자
캡슐쓰기 전 70
캡슐쓰러왔습니다.
캡슐 쓰고 난 후40
물쓰기 전 90
물쓰러왔습니다.
물쓰고 난 후 80
물 끓이는 중...
우유 데우는 중...
우유 붓는 중...
우유 붓고 난 뒤 0
두번째 라떼~~~
{ orderShot: 10, hasMilk: true }
/Users/경로/Desktop/경로/dist/index.js
throw new Error(`우유 부족!!! 현재 보유 우유량 : ${this.milk}`);
^

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

성공적이다!!

이처럼 상속을 잘 이용하면 공통적인 기능은 그대로 재사용하면서,

자식클래스에서만 조금 더 자식클래스에 특화된 기능들을 할 수 있고, 추가할 수도 있다.

그리고 super라는 키워드를 이용해서 부모 클래스에 있는 함수들을 호출하거나 접근할 수도 있다.

다만, 생성자 오버라이딩은 주의할 점이 크게 2개 있다.

만약 자식 클래스에서 또 다른 데이터를 생성자에서 받고 싶다면 (자식에서 constructor에 다른 매개변수를 추가해주는 등 다른 작업을 추가해주기 위해서 자식 클래스 생성자를 슈퍼 클래스 생성자와 다르게 따로 구현하고자 할 경우에는)

자식클래스에서의 생성자(derived classes)는 꼭 super을 호출해야 한다.

에러메시지 : 파생 클래스의 생성자는 'super' 호출을 포함해야 합니다. ts(2377)

즉, 위 캡처처럼 생성자는 super() 형식으로 달아주고, 인자 채워주는 식으로 불러주면 된다.

super(capsule, water)

또 하나 유념할 점은 자식클래스 안에 쓰는 생성자에서 super()를 호출할 수 있다는 것 자체가 부모의 매개변수를 물려받은 설계도라는 뜻이다! super()까지 쓴 다음에 마우스만 슬쩍 올리면 어떤 인자를 전달해야만 하는지 다 알려준다(굿)

그러므로 자식 클래스 안에서 쓰는 생성자 안에 최소 super가 요구하는 매개변수를 써주어야만 한다.

그렇게 자식 클래스 생성자 매개변수들 중에서 부모 클래스에서 필요한 데이터도 받아주고도, 이렇게 받아온 데이터를 super(여기안에 전달을 해주어야 한다.)

참고로 매개변수로 한번 받아온 인자 값이 바뀔 일이 없다면

constructor(beans: number, public readonly serialNumber : string)

readonly를 붙여 읽기 전용으로 바꾸어 줄 수도 있다.

class CafeLatteMachine extends CoffeMachine {
  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);
  }
  //...
  }
  
  const latteMachine = new CafeLatteMachine(100, 100, 2, "1S");
  console.log(latteMachine.serialNumber);

cool한 상속 기능 적용해보기 실습 끝!

<최종 코드와 출력 결과>

- 최종 코드

//   //커피머신 만들기
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 { ...coffee, 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);

- 출력 결과

캡슐쓰기 전 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
Node.js v17.7.1

728x90

'TypeScript > 타입스크립트 TypeScript' 카테고리의 다른 글

[타입스크립트] 객체지향의 꽃 composition(부제: 상속의 문제점) (0)	2022.04.22
[타입스크립트] 다형성(polymorphism)이 뭐가 좋은 것일까? (0)	2022.04.22
[타입스크립트] OOP 다형성, 상속 개념 확실하게 정리 (0)	2022.04.21
[타입스크립트] 제네릭 타입 별칭 (0)	2022.04.21
[타입스크립트] 2개 이상의 제네릭 적용해보기(추론, 명시, 프로미스 제네릭까지) (0)	2022.04.21

'TypeScript > 타입스크립트 TypeScript' 카테고리의 다른 글

티스토리툴바