🐳 3.2 인터페이스 사용

생성자를 포함시킨 커스텀 타입이 필요한 경우 일반클래스를 사용 / 그렇지 않으면 인터페이스 사용함

🌏 3.2.1 인터페이스 강제

속성 뿐만 아니라 메서드선언도 포함할 수 있다. ( ❗ 메서드 구현은 아님. )

implements키워드와 인터페이스 이름을 사용할 수 있음.

=> 메서드 시그니처만을 포함하지만, 클래스는 메서드 구현이 포함될 수 있다.

👉 Example

// 3_13.ts
interface MotorVeghicle3_13{
  startEngine(): boolean;
  stopEngine(): boolean;
  brake(): boolean;
  accelate(speed: number);
  hank(HowLong: number): void;
}

메서드 구현은 없음.

위 메서드를 구현하는 클래스 Car를 만들어보자.

class Car3_13 implements MotorVehicle3_13{

}

이 경우 클래스 선언은 컴파일되지 않아 오류가 발생.

인터페이스로 클래스를 선언할 때, 인터페이스 내 각 메서드를 구현해야함.

// 3_14.ts
interface MotorVehicle3_14{
  startEngine(): boolean;
  stopEngine(): boolean;
  brake(): boolean;
  accelate(speed: number);
  hank(HowLong: number): void;
}

class Car3_14 implements MotorVehicle3_14{
  startEngine(): boolean{
    return true;
  }
  stopEngine(): boolean{
    return true;
  }
  brake(): boolean{
    return true;
  }
  accelate(speed: number){
    console.log(`Driving faster`);
  }
  hank(HowLong: number): void {
    console.log(`Beep beep yeah!`);
  }
}

const car = new Car3_14();
car.startEngine();

car의 타입을 명시적으로 선언하지 않았습니다.

const car: Car3_14 = new Car3_14();

이 처럼 명시적으로 선언 가능.

const car:MotorVehicle3_14 = new Car3_14();

Car클래스는 커스텀 타입을 구현하므로 상수 car에 Motor Vehicle타입 선언 가능

👉 차이점

위 두가지의 차이점을 알아보자.

만약 Car가 8개의 메소드를 구현해야한다고 하면, Car타입이면, 객체 인스턴스내 8개를 모두 호출 가능.
MotorVehicle타입이면 인스턴스에 선언된 메서드만 호출 가능

이를 인터페이스는 특정 규약을 강제한다고 말할 수 있다.

// 3_15.ts
interface Flyable3_15{
    fly(howHigh: number);
    land();
}

interface Swimmable3_15{
    swim(howFar: number);
}

앞의 3가지를 합쳐보자.

// 3_16.ts
class Car3_16 implements MotorVehicle3_16, Flyable3_16, Swimmable3_16{
	// 3개의 인터페이스 내 모든 메서드를 구현
}

Car전체에 Flyable과 Swimmable을 가능하도록 하는건 좋은 방법이 아님.

상속개념을 적용해 Car클래스를 확장하고, 기능을 추가해보자.

class SecretServiceCar3_17 extends Car3_17 implements Flyable3_17, Swimmable3_17{
  // flyable과 swimmable 내 모든 메서드를 구현
}

Car클래스가 MotorVehicle 인터페이스에 정의된 기능을 가짐.

🌏 3.2.2 인터페이스 확장

MotorVehicle인터페이스 내의 각 메서드를 다르게 구현할 수도 있습니다.

// 3_18.tsclass SecretServiceCar3_18 implements MotorVehicle3_18, Flyable3_18, Swimmable3_18{  // 3가지 인터페이스 내 모든 메서드를 구현}

인터페이스 확장

// 3_19.tsinterface MotorVehicle3_19{  startEngine(): boolean;  stopEngine(): boolean;  brake(): boolean;  accelate(speed: number);  hank(HowLong: number): void;}interface Flyable3_19 extends MotorVehicle3_19{    // 클래스를 구현하는 메서드 시그니처  fly(howHigh: number);  land();}

이 후 클래스 선언에 implements Flyable 구문이 포함되 있으면 MotorVehicle 인터페이스에 선언된 5개 메서드와 Flyable의 두 메서드를 합친 총 7개의 메서드를 구현해야함.

// 3_20.tsclass SecretServiceCar3_20 implements Flyable3_20, Swimmable3_20{  startEngine(): boolean{    return true;  }  stopEngine(): boolean{    return true;  }  brake(): boolean{    return true;  }  accelate(speed: number){    console.log(`Driving faster`);  }  hank(howLong: number): void{    console.log(`Beep Beep!!`)  }  fly(howHigh: number){    console.log(`Flying ${howHigh} feet high`);  }  land(){    console.log(`Landing. Fasten your belts`);  }  swim(howFar: number){    console.log(`Swimming ${howFar} feet`);  }}

메서드 시그니처를 포함한 인터페이스 선언은 코드 가독성을 높여줌.

인터페이스는 각 기능이 잘 정의된 집합으로 인터페이스를 이용해 구체적인 클래스를 구현할 수 있다.

🌏 3.2.3 인터페이스 프로그래밍

먼저 인터페이스 프로그래밍을 사용할 수 없는 경우를 보자.

한가지 또는 모든 제품 정보를 읽는 코드를 작성해야 한다고 할 때, 먼저 클래스를 만들고 각 기능을 바로 구현하는 데 집중할 것입니다.

👉 Example

class Product{  id: number;  description: string;}class ProductService{  getProducts(): Product[]{    // 모든 products 정보를 가져옴.    return [];  }  getProductById(id: number): Product{    // id를 조회해 product의 정보를 가져옴.    return {id: 123, description: 'Good product'};  }}

그러고 나서 아래와 같이 ProductService 인스턴스를 만들고 메서드를 사용할 수 있다.

const productService = new ProductService();const products = productService.getProducts();

서버가없으니 동일한 API를 사용하는 MockProductService클래스를 생성하고 제품데이터를 반환할 수 있게 만들어 보자.

// 3_22.tsclass MockProductService3_22{	getProducts(): Product3_22[]{    // 하드 코딩된 제품 정보를 받는 코드 작성.    return [];  }  getProductById(id: number): Product3_22{    return {id: 456, description: 'Not a real product'};  }}

MockProductService클래스는 ProductService 클래스와 동일한 두 메서드를 선언했지만, 반대의 경우 오류가 발생할 수 있다.

=> 이를 방지하기 위해 MockProductService 클래스에 인터페이스를 강제할 수 있습니다.

implements키워드로 다른 클래스를 구현하는 클래스를 만들 수 있기 때문에 아래와 같이 MockProductService클래스를 수정하는 것이 바람직함.

class MockProductService3_22 implements ProductService{    // 구현}

타입스크립트는 implements 키워드뒤에 클래스이름을 입력하면 ProductService의 모든 메서드를 강제로 구현하도록 만듭니다. => 완벽하게 구현될때까지 컴파일되지 않음

❗ 가장 좋은 방법은 처음부터 인터페이스에 집중해 코드를 작성하는 것.

2개의 메서드를 사용하여 ProductService를 작성해야 하는 경우, 구현에 대한 걱정 없이 이러한 메서드로 인터페이스를 선언하는 것으로 시작해야함.

// 3_23interface Product3_23{ // 인터페이스를 통한 커스텀 타입 선언  id: number;  description: string;}interface IProductService3_23{ // API를 인터페이스로 선언  getProducts(): Product3_23[];  getProductById(id: number):Product3_23;}class ProductService3_23 implements IProductService3_23{  getProducts(): Product3_23[]{    // 실제 데이터에서 제품을 받습니다.    return [];  }  getProductById(id: number): Product3_23{    // id로 제품을 조회함.    return {id: 123, description: 'Good product'};  }}

API를 인터페이스로 선언한다. = 필요한 기능에 대해 자세하게 구현했다. 는 의미

MockProductService같은 새 클래스를 구현해야한다면?

class MockProductService implements IProductService{  // 메소드 구현}

커스텀 타입을 초기화 할 필요가 없을 때 class 대신 interface 키워드를 사용하면 JS코드양이 줄어듬

인터페이스 프로그래밍의 좋은 예는 팩토리함수를 사용하는 것.

❗ 팩토리 함수란 비즈니스 로직을 구현하고 객체의 인스턴스를 반환하는 함수.

// 3_24function getProductService3_24(isProduction: boolean): IProductService3_24{  if( isProduction){    return new ProductService3_10();  }else{    return new MockProductService3_24  }}const productService3_24: IProductService3_24; // 인터페이스 타입을 나타내는 상수...const isProd = true; // 현재 프로덕션 상태임을 나타냄productService3_24 = getProductService3_24(isProd); // productService 인스턴스를 가져옴const products3_24[] = productService3_24.getProducts(); // productService 내 메서드를 호출.

isProd는 true로 하드코딩되있지만, 실제 앱에서는 속성 파일 또는 환경 변수를 통해 이 값을 가져옴.

ProductService or Mock ProductService가 반환되더라도 함수 시그니처에는 IProductService를 반환한다고 작성되있다. => 나중에 Another ProductService 라는 객체를 반환하도록 수정해야하는 경우, 새 클래스 선언에 implements IProductService를 입력함으로써 팩토리 함수를 사용하는 코드가 추가 변경 없이 컴파일됨.

(아직 잘 모르겠음.)

🌏 요약

• 클래스 상속이란 기존에 정의되있는 클래스의 모든 멤버를 물려받아 새로운 클래스를 생성하는 것.
• 서브 클래스에서 슈퍼 클래스의 public 또는 protected 프로퍼티 사용O
• 클래스 프로퍼티가 private로 선언된 경우 클래스 내부에서만 사용가능
• private 생성자를 사용해 한번만 인스턴스화할 수 있는 클래스 만들 수 있음.
• 메서드 오버라이딩은 객체 지향 프로그래밍에서 서브 클래스가 슈퍼 클래스의 메서드를 특정 형태로 구현하여 재정의 하는 것.
• 클래스 생성자도 재정의 가능
• super키워드와 super() 메서드로 서브 클래스가 슈퍼클래스의 클래스 멤버를 호출할 수 있음.