[TypeScript] 타입스크립트 클래스 사용하기 - 상속, 추상 클래스, 추상 클래스를 활용한 디자인 패턴(Template Method Pattern)

🎯 TypeScript 클래스 사용하기

class Person {
    name: string; // 객체와 달리 쉼표가 아닌 것에 유의!!
 
    constructor(name: string) {
        this.name = name; // 이 클래스의 생성자로 처음 클래스가 만들어질 때 해당 구문이 실행됨!
    }
 
    say() {
        return "안녕 " + this.name
    } // 클래스 내부의 메서드(객체 내부의 함수)는 일반적인 함수와 유사하게 선언함
}
 
let person = new Person("John");

• new를 사용하여 Person 클래스의 인스턴스 생성
  • Person class의 필드는 name
  • 생성자 constructor
  • 메소드 say()가 있다.
• 클래스 안에 this.를 앞에 붙이면 클래스 필드를 의미

 

📝 클래스 상속받기

class Person {
    name: string;
    age: number;
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
 
    introduce(): void {
        console.log(`이름은 ${this.name}이며 나이는 ${this.age}입니다.`);
    }
}
 
 
class man extends Person {
    sex: string; // 추가적인 데이터에 한해서만 넣으면 된다.
 
    constructor(name: string, age: number) {
        super(name, age); // 상위 클래스의 생성자를 활용할 경우, super 키워드 사용
        this.sex = "남자";
    }
 
    // 하위 클래스에서 메소드를 다시 정의하는 것을 오버라이딩이
    introduce(): void {
        console.log(`이름은 ${this.name}이며 나이는 ${this.age}이며 성별은 ${this.sex}입니다.`);
    } // 기존 클래스 생성자, 메서드 등을 변경할 수 있다.
}
 
 
 
const test: man = new man('홍길동', 20);
console.log(test.introduce()); // "이름은 홍길동이며 나이는 20이며 성별은 남자입니다.

• 클래스를 활용하여 객체를 만들 수 있지만, 또 다른 클래스도 만들 수 있음 => 상속
  • OOP는 상속을 이용하여 존재하는 클래스를 확장해 새로운 클래스를 생성할 수 있다.
• extends 키워드 사용
• 기존 클래스의 정보를 모두 살리고, 추가적인 정보를 넣을 수 있다.
• 파생된 클래스는 하위 클래스(subclass), 기초 클래스는 상위 클래스(superclass)라고 부른다.
• 즉, 기존 거를 받고 새로운 것을 추가해서 새로운 클래스 생성
• super() 꼭 작성!

 

📝 추상 클래스(Abstract Class)

abstract class Developer {
  // 추상 메서드
  abstract coding(): void; // 'abstract'가 붙으면 상속 받은 클래스에서 무조건 구현해야 함
 
  // 일반 메서드
  drink(): void {
    console.log('drink sth');
  }
} // 직접 인스턴스를 생성할 수 없다.
 
 
class FrontEndDeveloper extends Developer {
  coding(): void {
    // 추상 클래스를 상속한 클래스는 추상 클래스의 추상 메소드를 반드시 구현하여야 한다
    console.log('develop web');
  }
 
  design(): void {
    console.log('design web');
  }
}
 
const dev = new Developer(); // error: cannot create an instance of an abstract class
 
const josh = new FrontEndDeveloper();
josh.coding(); // develop web
josh.drink(); // drink sth
josh.design(); // design web

abstract class Animal {
  protected name: string
 
  constructor(name: string) {
    this.name = name
  }
 
  abstract makeSound(): void
}
 
class Dog extends Animal {
  constructor(name: string) {
    super(name);
  }
 
  makeSound(): void {
    console.log(`${this.name} 멍멍!!`)
  }
}
 
const dog = new Dog("진돗개")
dog.makeSound(); // 진돗개 멍멍!!

abstract class Department {
  constructor(public name: string) {}
 
  printName(): void {
    console.log("Department name: " + this.name);
  }
 
  abstract printMeeting(): void; // 반드시 파생된 클래스에서 구현되어야 합니다.
}
 
class AccountingDepartment extends Department {
  constructor() {
    super("Accounting and Auditing"); // 파생된 클래스의 생성자는 반드시 super()를 호출해야 합니다.
  }
 
  printMeeting(): void {
    console.log("The Accounting Department meets each Monday at 10am.");
  }
 
  generateReports(): void {
    console.log("Generating accounting reports...");
  }
}
 
let department: Department; // 추상 타입의 레퍼런스를 생성합니다
department = new Department(); // 오류: 추상 클래스는 인스턴스화 할 수 없습니다
department = new AccountingDepartment(); // 추상이 아닌 하위 클래스를 생성하고 할당합니다
department.printName();
department.printMeeting();
department.generateReports(); // 오류: 선언된 추상 타입에 메서드가 존재하지 않습니다

• 추상 클래스는 다른 클래스들이 파생될 수 있는 기초 클래스이다.
• 상속을 강제하게 됨
• 작은 규모의 프로젝트에서는 거의 없음
• 직접 인스턴스화 할 수 없다.
• abstract 키워드는 추상 클래스뿐만 아니라 추상 클래스 내에서 추상 메서드를 정의하는 데 사용된다.
• 추상 메소드는 클래스에 구현되어 있지 않고, 파생된 클래스에서 구현해야 한다.
• 추상 클래스(abstract class)는 하나 이상의 추상 메소드를 포함하며 일반 메소드도 포함할 수 있다.
• 추상 메소드는 내용이 없이 메소드 이름과 타입만이 선언된 메소드를 말하며 선언할 때 abstract 키워드를 사용한다. => 추상 클래스는 다른 클래스들이 파생될 수 있는 기초 클래스이다.
• 추상 클래스를 정의할 때는 abstract 키워드를 사용하며, 직접 인스턴스를 생성할 수 없고 상속만을 위해 사용된다. => abstract 클래스를 사용할 경우, 해당 클래스로 직접 객체를 만들 수 없다.
• 추상 클래스를 상속한 클래스는 추상 클래스의 추상 메소드를 반드시 구현하여야 한다.

 

📝 추상 클래스를 활용한 디자인 패턴(Template Method Pattern)

📕 디자인 패턴이란?

• 소프트웨어 설계 시 공통으로 발생되는 문제에 대해 자주 쓰이는 설계 방법을 정리한 것
• 디자인 패턴을 사용하면 개발의 효율성, 유지 보수성, 운용성이 높아져 프로그램 최적화에 도움이 됨

abstract class Parent {
    // 템플릿 메소드 : 자식에서 공통적으로 사용하는 부분(someMethod)
    public do() {
        console.log("Parent에서 실행 - 상");
 
        this.hook(); // 훅 메소드 : Child에서 구현해야 할 부분
 
        console.log("Parent에서 실행 - 하");
    }
    abstract hook(): void
}
 
class Child extends Parent {
    hook(): void {
        console.log("Child");
    }
}
 
const child = new Child();
child.do();
 
// 실행 결과
 
// Parent에서 실행 - 상
// Child
// Parent에서 실행 - 하

• 템플릿 메소드 패턴, 소프트웨어 공학에서 동작상의 알고리즘 프로그램 뼈대를 정의하는 행위
• 상위 클래스(추상 클래스)에서 추상 메서드를 통해 기능의 골격 제공, 하위 클래스(구체 클래스) 메서드의 세부처리 구체화
  • 즉, 전체적인 알고리즘은 상위 클래스에서 구현하고 다른 부분은 하위 클래스에서 구현한다.
• 프로그램의 일부분을 서브 클래스로 캡슐화해 전체 구조를 바꾸지 않고 특정 단계의 기능을 바꾸는 것을 디자인 패턴이라고 한다.
• 전체 구조는 유사하지만 부분적으로 다른 구문으로 구성된 메소드의 코드 중복을 최소 할 수 있다.

 

📌 참고

• 타입스크립트 핸드북
• TypeScript 한글 문서
• TypeScript - Class | PoiemaWeb
• Using Template Method Design Pattern In Java - DZone Java