🐳 3장 클래스와 인터페이스를 사용한 객체 지향 프로그래밍

이번 장에서는 객체지향프로그래밍 관점으로 클래스와 인터페이스를 배워볼 것이다.

객체 지향 언어를 사용하는 개발자는 클래스에 특정 API를 적용하는 방법으로 인터페이스를 사용합니다.

🐳 3.1 클래스 사용

🌏 2장 복습

• 객체 지향 언어는 멤버 변수로 클래스를 선언할 수 있다.
• JS에서는 클래스 내 생성자를 선언할 수 있으며 인스턴스 생성 중 한번만 호출한다.
• 컴파일 타겟이 ES5인 경우 타입스크립트 컴파일러는 타입스크립트 클래스를 자바스크립트 생성자 함수로 변환함.
  ES6이상이면 자바스크립트 클래스로 컴파일됨.
• 생성자 파라미터를 readonly, public, protected, private 키워드로 정의하면 타입스크립트는 각 파라미터에 대한 클래스 프로퍼티를 만듬.

🌏 3.1.1 클래스 상속

keyword : extends

타입스크립트도 부모로부터 기능을 상속을 받습니다.

기존 클래스를 기반으로 새 클래스를 만들 수 있습니다.

class Person {
    firstName = '';
    lastName = '';
    age =0;
}

class Employee extends Person {
    department = '';
}

const empl = new Employee();
// empl.age;

empl. 후 ctrl+Enter하면 자동완성 목록에 Person의 요소들이 있는 걸 볼 수 있다.

Person클래스는 부모이고, Employee는 Person을 상속받은 자식클래스가 됩니다.

클래스는 프로퍼티 외에도 메서드를 가집니다.

메서드로 클래스 내부에 선언된 함수를 호출합니다. (private가 아니라면 서브클래스에 상속됨.)

class Person {
    firstName = '';
    lastName = '';
    age =0;
    
    sayHello(): string {
        return `My name is ${this.firstName} ${this.lastName}`;
    }
}

class Employee extends Person {
    department = '';
}

const empl = new Employee();
// empl.sayHello

empl.에서 자동완성하면 sayHello가 뜬다.

🌏 3.1.2 public, private, protected 접근 제어자

접근제어자로 클래스 멤버 접근 권한을 제어합니다.

• public : 클래스 멤버는 모든 내부 및 외부 클래스 접근가능.
• protected : 동일 패키지에 속하는 클래스와 서브 클래스 관계일 경우만 접근가능
• private : 클래스 내에서만 접근가능.

class Person {
    public firstName = '';
    public lastName = '';
    private age =0;
    
    protected sayHello(): string {
        return `My name is ${this.firstName} ${this.lastName}`;
    }
}

class Employee extends Person {
    department = '';
    
    reviewPerformance(): void {
        this.sayHello();
        this.increasePay(5);
    }
    
    increasePay(percent: number): void{
 //       this.
    }
}

const empl = new Employee();
empl.sayHello(); // 오류 발생

this.에서 자동완성 시 private인 age는 보이지 않는게 보인다.

sayHello는 protected로 선언 되었기 때문에 클래스 인스턴스에서는 접근이 안된다.

class Person {
    public firstName = '';
    public lastName = '';
    private age =0;
    
   constructor(firstName: string, lastName: string, age: number){
       this.firstName = firstName;
       this.lastName = lastName;
       this.age = age;
   }
}

javascript

class Person {
    constructor(public firstName: string,
                public lastName: string,
                private age: number){ }
}

const pers = new Person('John', 'Smith', 29)
console.log(`${pers.firstName} ${pers.lastName} ${pers.age}`)

js에서 age에서 빨간 줄이 표시된다. => private이기 때문.

❗ 실제로 개발 시 noEmitOnError옵션을 사용하여 모든 오류가 없으면 자바스크립트를 생성하도록 설정한다.

🌏 3.1.3 고정 변수와 싱글톤

ES6부터 클래스의 각 인스턴스가 일부 프로퍼티를 공유해야하는 경우 정적 프로퍼티로 선언합니다.

타입스크립트는 static 키워드를 지원합니다.

static과 private생성자로 싱글톤 디자인 패턴을 구현해보자.

class Gangsta {
    static totalBullets = 100;
    shoot(){
        Gangsta.totalBullets--;
        console.log(`Bullets left : ${Gangsta.totalBullets}`);
    }
}

const g1 = new Gangsta();
g1.shoot(); // 99

const g2 = new Gangsta();
g2.shoot(); // 98

두 인스턴스는 동일한 변수 totalBullets를 공유하므로 99 -> 98 로 변했다.

shoot()의 this.totalBullets는 인스턴스 변수가 아니기 때문에 사용하지 않았습니다. static클래스 멤버 앞에 해당 클래스 이름을 붙이면 접근 가능합니다.

❗ static인 클래스 멤버는 서브클래스에 공유되지 않습니다.
SuperGangsta클래스가 Gangsta의 서브클래스라면 totalBullets 프로퍼티를 복사해 그대로 가져옵니다.
참고 : goo.gl/3BSnjZ

한 곳에서만 앱 전체 상태를 관리하며, 외부에서 접근 가능한 객체를 만들어 보자.
전체 데이터를 한 곳에서 관리하는 우너칙을 단일 데이터 소스 또는 단일 진실 공급원이라고함.

객체 지향 언어에서 단 하나의 인스턴스를 생성하는 디자인 패턴을 싱글톤 이라고 합니다.

new 키워드로 원하는 만큼 여러 인스턴스를 생성할 수 있기 때문에 new 키워드사용을 막아야합니다.

단일 인스턴스를 만드는 방법?

클래스 생성자가 private인 경우 클래스 내에서만 접근 가능하다는 문제가 있습니다.
static키워드로 클래스 메서드를 정적 메서드로 만들면 특정 인스턴스가 아닌 클래스에만 속하도록 만들 수 있음

👉 예제

• AppState 싱글톤 디자인 패턴으로 counter를 가짐.
• counter는 외부에서 접근 가능하며 단일 인스턴스에서만 그 값을 저장함.
• counter의 값을 읽는 메서드 역시 AppState 인스턴스에서 가져옴.

class AppState{
    counter = 0; // 앱 상태를 나타냄.
    private static instanceRef: AppState;
    private constructor() {}
	static getInstance(): AppState{
        if(AppState.instanceRef === undefined){
            AppState.instanceRef = new AppState();
        }
        return AppState.instanceRef;
    }
}

// const appState = new AppState(); // private 생성자 때문에 오류 발생

// AppState 인스턴스에 대한 참조를 가져옴.
const appState1 = AppState.getInstance();
const appState2 = AppState.getInstance();

appState1.counter++;
appState1.counter++;
appState2.counter++;
appState2.counter++;

console.log(appState1.counter)
console.log(appState2.counter)

AppState클래스는 private 생성자가 있으므로 new 키워드로 생성이 불가.

getInstance() 메소드로 생성자를 호출 가능.
정적 메소드로 크랠스 인스턴스가 없을 때 메서드를 호출할 수 있다.

🌏 3.1.4 super() 메서드와 super키워드

• 슈퍼클래스와 서브클래스가 같은이름의 메서드를 가지고있다면??
• 둘 다 모두 생성자가 있다면??

=> 둘 다 생성자가 있는 경우 서브클래스의 생성자는 super()메소드로 슈퍼 클래스의 생성자를 호출해야함.

// 3_3.ts
class Person3_3{
  constructor(public firstname: string,
    public lastName: string,
    private age: number){}  // 슈퍼클래스 Person의 생성자
}

class Employee3_3 extends Person3_3{ // 서브클래스 Employee
  constructor(firstName: string, lastName: string,
    age: number, public department: string){ // employee 생성자
      super(firstName, lastName, age); // 슈퍼클래스 생성자를 호출함.
    }
}

const empl = new Employee3_3('Joe', 'Smith', 29, 'Accounting'); // 서브 클래스를 인스턴스를 생성함.
console.log(empl);

// 결과
/*
  Employee3_3 {
  firstname: 'Joe',
  lastName: 'Smith',
  age: 29,
  department: 'Accounting'
}
*/

두 클래스 모두 생성자가 있으며, 각 파라미터가 필수 파라미터로 호출되는지 확인해야함.

Employee의 생성자는 new 연산자를 사용할 때 마다 자동으로 호출되며 슈퍼 클래스 Person의 생성자 호출을 일일이 해줘야함.

department를 제외하고는 Person객체를 구성하기 위한 것으로 super()메서드를 호출해 Person에 전달함.

동일한 이름을 가진 슈퍼 클래스의 메서드를 호출 시 this대신 super사용❗

// 3_4.ts
class Person3_4{
  constructor(public firstName: string,
    public lastName: string,
    private age: number){}

    sellStock(symbol: string, numberOfShares: number){ // 부모의 sellStock()
      console.log(`Selling ${numberOfShares} of ${symbol}`);
    }
}

class Employee3_4 extends Person3_4{
  constructor(firstName: string, lastName: string, 
    age: number, public department: string){
    super(firstName, lastName, age); // 부모 생성자 호출
  }

  sellStock(symbol: string, shares: number){ // 자식의 sellStock()
    super.sellStock(symbol, shares); // 부모에서 sellStock() 호출
    this.reportToCompliance(symbol, shares);
  }

  private reportToCompliance(symbol: string, shares: number){ // reportToCompliance()는 private 메서드
    console.log(`${this.lastName} from ${this.department} sold ${shares} shares of ${symbol}`);
  }
}

const empl3_4 = new Employee3_4('Joe', 'Smith', 29, 'Accounting');
empl3_4.sellStock('IBM', 100); // Employee 에서 sellStock 호출.

// 결과
/*
Selling 100 of IBM
Smith from Accounting sold 100 shares of IBM
*/

reportToCompliance()는 클래스내부에서만 호출됩니다.

super키워드를 활용해 슈퍼 클래스에서 선언한 메서드의 기능을 재사용하여 동시에 새기능을 추가함.

정리

마지막 줄의 sellStock로 Employee3_4의 sellStock으로가고, super키워드를 이용해 Person3_4의 sellStock을 실행한 후 Employee3_4안에 있는 reportToCompliance를 실행

🌏 3.1.5 추상 클래스

추상 클래스는 객체로 만들 수 없는 추상적인 개념으로 일조으이 설계도 역할.

abstract 키워드로 선언함.

추상 클래스로부터 객체를 생성하므로 인스턴스화 할 수 없고, 프로퍼티와 메서드도 abstract로 선언 가능

❓ why need?

구체적이지 않은 메서드를 서브 클래스에 위임해 하위에서 더 자세히 구현할 수 있다.

👉 Example

A회사에서 직원은 정규직과 계약직으로 구분됨.

• constructor(name: string)
• changeAddress(newAddress: string)
• giveDayOff()
• promote(percent: number)
  promote() 메서드는 휴일을 하루 더 부여하고, 정해진 비율만큼 급여를 인상합니다.
• increasePay(percent: number)
  increasePay() 메서드는 일반 정규직 직원의 경우 연간 급여를, 계약직의 경우 시간당 급여를 인상

위 메서드를 포함시켜 직원을 가리키는 클래스를 설계합니다.
이 때 단 하나의 console.log()만 사용할 수 있습니다.

// 3_5.ts
abstract class Person3_5{
  constructor(public name: string){};
    changeAddress(newAddress: string){
      console.log(`Changing address to ${newAddress}`);
    }

    giveDayOff(){
      console.log(`Giving a day off to ${this.name}`);
    }

    promote(percent: number){
      this.giveDayOff();
      this.increasePay(percent); // 추상메서드 호출
    }
    
    abstract increasePay(percent: number): void; // 추상 메서드를 선언
}

giveDayOff()메서드를 외부에서 호출하는 것을 막으려면 private를 선언해야함.
giveDayOff()를 Person클래스와 자식클래스에서만 호출을 허용할 경우 protected

중요한 점은 추상 메서드를 "호출"하는 명령문을 작성할 수 있다는 것.

추상 클래스는 인스턴스화할 수 없으니 추상 멤버(구현되지 않은 메서드)는 절대 호출 않음.
인스턴스화 가능한 추상 클래스의 자식을 생성하려면 부모의 모든 추상 메서드를 구현해야함.

// 3_6.ts
class Employee3_6 extends Person3_5{
  increasePay(percent: number){ // Employee를 위한 increasePay()메서드를 구현함.
    console.log(`Increasing the salary of ${this.name} by ${percent}%`);
  }
}

class Contractor3_6 extends Person3_5{
  increasePay(percent: number){ // Contracte를 위한 increasePay() 메서드를 구현
    console.log(`Increasing the hourly rate of ${this.name} by ${percent}%`);
  }
}

class A extends class B의 경우 A가 B를 확장한다는 뜻으로 A가 더 많은 프로퍼티를 가지기 때문에 B가 더 일반적이고, A가 더 상세하다고 할 수 있습니다.

// 3_7.ts
// ... 3_5의 Person과 3_6의 employee, contractor 사용.
const workers3_7: Person3_7[] = []; // 서브 클래스 타입을 배열로 선언.

workers3_7[0] = new Employee3_7('John');
workers3_7[1] = new Contractor3_7('Mary');

workers3_7.forEach(worker => worker.promote(5)); // 각 객체마다 promote() 실행

// 결과
/*
Giving a day off to John
Increasing the salary of John by 5%
Giving a day off to Mary
Increasing the hourly rate of Mary by 5%
*/

배열 workers는 person타입의 배열로 자식 객체의 인스턴스를 저장함.

❗ Person의 자식은 스스로 생성자를 선언하지 않기 때문에 Employee와 Contrator가 생성될 때 부모의 생성자가 자동으로 호출됩니다. 어느 자식도 생성자를 갖고 있지 않다면 super()로 person의 생성자를 호출합니다.

이처럼 상속을 통해 기능을 확장하거나 변경하는 것을 다형성 이라고 하며 객체 지향 언어의 특징 중 하나임.

❗ 인스턴스화 할 수 없는 클래스를 선언해야 하지만, 서브 클래스는 인스턴스화가 가능함.
슈퍼 클래스에 protected생성자를 선언하고 서브 클래스 생성자에서 super() 메서드로 호출 가능.
추상 클래스 기능을 모방한 방법입니다.
protected생성자를 가진 클래스를 그 자체로 추상으로 선언해야 추상 메서드를 선언할 수 있습니다.

🌏 3.1.6 메서드 오버로딩

객체 지향 프로그래밍 언어는 메서드 오버로딩을 지원함.
파라미터의 유형과 개수는 다르지만 이름이 같은 메서드를 여러개 가질수 있게 만드는 것.

타입 언어에서 타입이 없는 파라미터를 가진 클래스 메서드를 호출할 수 없으므로 파라미터 타입과 반환값을 명시하여 메서드를 만들어야함.

타입스크립트는 함수 내 파라미터 개수를 처음보다 더 많이 혹은 더 적게 만들 수 있습니다.
물론 메서드내에서 전달된 객체가 문제가 있다면 런타임 오류가 발생할 수 있습니다.

// 3_8.ts
class ProductService3_8{
  getProducts(){ // getProducts 메서드는 파라미터가 없음
    console.log(`Getting all products`);
  } 

  getProducts(id: number){ // 오류발생 -> getProducts()메서드는 1개 파라미터를 가짐.
    console.log(`Getting the product info for ${id}`);
  }
}

const prodService = new ProductService3_8();
prodService.getProducts(123);
prodService.getProducts();

중복 함수 구현오류를 일으킴.
오류가 있는 TS지만, JS에서는 유효함.

class ProductService3_9{
    // 허용가능한 메서드들을 선언
    getProducts();
    getProducts(id: number);

    // 메서드를 구현
    getProducts(id?: number){ // 오류발생 -> getProducts()메서드는 1개 파라미터를 가짐.
      typeof id === 'number' ? console.log(`Getting the product info for ${id}`) : console.log(`Getting all Products`)
    }
  }
  
  const prodService = new ProductService3_9();
  prodService.getProducts(123);
  prodService.getProducts();

getProducts(id?: number)

?는 해당 파라미터를 선택 사항으로 선언하는 것을 의미합니다.
생략시 Overload signature is not compatible with function implementation이라는 오류 발생.

! 위쪽에 먼저 선언한 허용 가능한 메서드들을 생략해도 프로그램 동작은 변하지 않음.
IDE내 getProducts()함수의 자동 완성 기능을 도와주는 역할을 함.
생성된 JS파일을 봐도 getProducts(id)만 남아있음

메서드 시그니쳐를 오버로드해 다른 파라미터를 가질 수 있을 뿐 아니라 다른 타입 값을 반환할 수 있음.

다음 코드는 2가지 방법으로 호출 가능.

• product의 description을 전달하고 Product타입인 배열을 반환.
• product의 id를 전달하고 Product 타입인 객체를 반환

// 3_10.ts
interface Product3_10{
  id: number;
  description: string;
}

class ProductService3_10{
  getProducts(description: string): Product3_10[]; // 첫번째
  getProducts(id:number): Product3_10; // 두번째
  getProducts(product: number | string): Product3_10[] | Product3_10{ // 메서드구현
    if(typeof product === 'number'){ // id로 메서드가 호출되었는지 확인
      console.log(`Getting the product info for id ${product}`);
      return {id: product, description: 'great product'};
    }else if(typeof product ==='string'){ // description으로 호출되었는지 확인
      console.log(`Getting product with description ${product}`);
      return [{id: 123, description: 'blue jeans'}, {id: 789, description: 'blue jeans'}];
    } else{
      return {
        id: -1,
        description: 'Error: getProducts() accept only number or string as args'
      }
    }
  }
}

const prodService3_10 = new ProductService3_10();

console.log(prodService3_10.getProducts(123));

console.log(prodService3_10.getProducts('blue jeans'));

반환된 데이터를 보면, 객체와 배열로 반환된걸 볼 수 있습니다.

👉 오버로딩 생성자

타입스크립트 클래스는 constructor 키워드로 생성자를 만든다.

// 3_11.ts
class Product3_11{
  id: number;
  description: string;
  constructor(); // 생성자 선언 내 파라미터가 없음. (생성자 선언)
  constructor(id: number); // 생성자 선언 내 한개의 파라미터가 있음. (생성자 선언)
  constructor(id: number, description: string); // 2개의 파라미터가 있음. (생성자 선언)
  constructor(id?: number, description?: string){
    // 이곳에 생성자를 구현
    // 모든 가능한 파리미터를 다루는 생성자를 구현 (생성자 선언)
  }
}

파라미터가 없는 생성자도 허용하기 때문에 생성자 구현에서 모든 파라미터를 선태갛ㄹ 수 있게 만들었음.

객체 속성 초기화를 위해 오버로딩 생성자가 유일한 정답은 아니다.

예를 들어 생성자에 사용되는 모든 파라미터를 나타내느 ㄴ인터페이스를 선언할 수 있다.

인터페이스는 선택적 프로퍼티를, 크랠스는 선택적 파라미터를 취하는 단일 생성자를 가짐.

// 3_12.ts
interface ProductProperties3_12{ // ProductProperties는 두 개의 선택적 파라미터를 가짐
  id?: number,
  description?: string;
}

class Product3_12{
  id: number;
  description: string;
  constructor(properties?: ProductProperties3_12){
    // 클래스 생성자는 ProductProperties 타입인 선택적 파라미터를 가짐.
    // 이곳에 생성자를 구현
  }
}

정리

타입스크립트에서 오버로딩 메서드나 생성자를 사용할 떄 주의가 필요함.

오버로딩을 사용하면 여러 방법으로 메서드를 호출할 수 있지만, 로직을 읽고 판단하기 힘들어 질 수 있습니다.

오버로딩 사용을 절제하는 것이 일반적.