TypeScript - 추상 클래스

안녕하세요, 열망하는 프로그래머 여러분! 오늘 우리는 TypeScript의 세계로 흥미로운 여정을 떠나고, 그 중 하나의 강력한 기능인 추상 클래스를 탐구해보겠습니다. 프로그래밍에 새로운 사람이라고 걱정하지 마세요; 나는 단계별로 안내해드리겠습니다. 수년 동안 많은 학생들을 가르친 경험을 바탕으로 말이죠. 그럼 시작해보겠습니다!

TypeScript - Abstract Classes

추상 클래스는 무엇인가요?

추상 클래스에 대해 구체적으로 들어가기 전에 간단한 비유로 시작해보겠습니다. 당신이 차량 딜러점에 가보면, "차량"이라는 표지를 볼 수 있습니다. 하지만 "차량"을 실제로 살 수는 없습니다.因为它太过于通用。你需要选择一个具体的车辆类型, 比如汽车、卡车或摩托车。 프로그래밍에서 추상 클래스는 그러한 일반적인 "차량" 개념과 같습니다 - 그它是其他类的蓝图이지만, 직접 객체를 생성할 수는 없습니다.

TypeScript의 추상 클래스는 다른 클래스들이 상속할 수 있는 기본 클래스로 사용됩니다. 추상 메서드(본문이 없는 메서드)와 구체 메서드(본문이 있는 메서드)를 포함할 수 있습니다. 중요한 점은 추상 클래스를 직접 인스턴스화할 수 없다는 것입니다.

추상 클래스 생성하기

이제 TypeScript에서 추상 클래스를 어떻게 생성하는지 살펴보겠습니다. abstract 키워드를 class 키워드 앞에 사용합니다. 다음은 기본 구조입니다:

abstract class 클래스이름 {
// 속성과 메서드가 여기에 들어갑니다.
}

추상 메서드

추상 클래스는 추상 메서드를 가질 수 있습니다. 이는 선언은 되었지만 추상 클래스에서는 구현이 없는 메서드입니다. 이 추상 클래스를 확장하는 모든 클래스는 이 메서드의 구현을 제공해야 합니다.

구체 메서드

추상 클래스는 또한 구체 메서드를 가질 수 있습니다. 이는 완전히 구현된 메서드로, 자식 클래스에 의해 상속될 수 있습니다.

예제 1: Shape 추상 클래스

추상 클래스가 어떻게 작동하는지 설명하기 위해 간단한 예제를 만들어보겠습니다. 우리는 추상 Shape 클래스를 만들고 calculateArea()라는 추상 메서드를 포함시킬 것입니다.

abstract class Shape {
color: string;

constructor(color: string) {
this.color = color;
}

abstract calculateArea(): number;

displayColor(): void {
console.log(`이 도형은 ${this.color}입니다.`);
}
}

이 예제에서:

Shape는 우리의 추상 클래스입니다.
color는 모든 도형이 가질 속성입니다.
calculateArea()는 추상 메서드입니다. 본문이 없음을 주의하세요.
displayColor()는 모든 도형이 사용할 수 있는 구체 메서드입니다.

이제 Shape 클래스를 확장하는 몇 가지 특정 도형을 만들어보겠습니다:

class Circle extends Shape {
radius: number;

constructor(color: string, radius: number) {
super(color);
this.radius = radius;
}

calculateArea(): number {
return Math.PI * this.radius * this.radius;
}
}

class Rectangle extends Shape {
width: number;
height: number;

constructor(color: string, width: number, height: number) {
super(color);
this.width = width;
this.height = height;
}

calculateArea(): number {
return this.width * this.height;
}
}

이제 이 클래스들을 사용할 수 있습니다:

const circle = new Circle("빨간색", 5);
console.log(circle.calculateArea()); // 출력: 78.53981633974483
circle.displayColor(); // 출력: 이 도형은 빨간색입니다.

const rectangle = new Rectangle("파란색", 4, 6);
console.log(rectangle.calculateArea()); // 출력: 24
rectangle.displayColor(); // 출력: 이 도형은 파란색입니다.

이 예제에서 Circle과 Rectangle은 Shape 클래스를 확장하고 calculateArea() 메서드의 자신의 구현을 제공합니다. 그리고 Shape 클래스로부터 displayColor() 메서드를 상속합니다.

예제 2: Animal 추상 클래스

우리의 이해를 강화하기 위해 또 다른 예제를 만들어보겠습니다. 이번에는 추상 Animal 클래스를 만들겠습니다:

abstract class Animal {
name: string;

constructor(name: string) {
this.name = name;
}

abstract makeSound(): void;

move(distance: number = 0): void {
console.log(`${this.name}가 ${distance} 미터를 이동했습니다.`);
}
}

class Dog extends Animal {
constructor(name: string) {
super(name);
}

makeSound(): void {
console.log("와우! 와우!");
}
}

class Cat extends Animal {
constructor(name: string) {
super(name);
}

makeSound(): void {
console.log("야옹!");
}
}

이제 이 클래스들을 사용해보겠습니다:

const dog = new Dog("버디");
dog.makeSound(); // 출력: 와우! 와우!
dog.move(10); // 출력: 버디가 10 미터를 이동했습니다.

const cat = new Cat("윗띠");
cat.makeSound(); // 출력: 야옹!
cat.move(5); // 출력: 윗띠가 5 미터를 이동했습니다.

이 예제에서 Animal은 추상 클래스로 makeSound()라는 추상 메서드와 move()라는 구체 메서드를 가지고 있습니다. Dog과 Cat은 Animal을 확장하고 makeSound() 메서드의 자신의 구현을 제공합니다.

추상 클래스를 왜 사용할까요?

추상 클래스를 사용하는 이유에 대해 궁금해할 수도 있습니다. "왜 이 모든 어려움을 겪어야 하나요? 일반 클래스를 사용하는 것이 아니라면?" 그 이유는 추상 클래스가 관련된 클래스 집합에 대해 공통 인터페이스를 정의하는 데 매우 유용하기 때문입니다. 그들은 다음과 같은 기능을 제공합니다:

관련된 클래스 집합에 대해 공통 구조를 정의합니다.
자식 클래스가 구현해야 할 특정 메서드를 강제합니다.
모든 자식 클래스가 사용할 수 있는 공통 기능을 제공합니다.

이는 다른 클래스가 따라야 할 템플릿이나 계약서를 만드는 것과 같습니다. 관련된 클래스 간의 일관성을 보장하면서도 필요한 경우 맞춤화할 수 있는 방법입니다.

추상 클래스의 메서드

추상 클래스에서 사용할 수 있는 메서드 유형을 요약한 표입니다:

메서드 유형	설명	추상 클래스에서 호출 가능?	자식 클래스에서 구현 필요?
추상 메서드	본문이 없이 선언된 메서드	아니요	예
구체 메서드	완전히 구현된 메서드	예	아니요 ( 재정의 가능)

결론

이제 여러분은 TypeScript의 추상 클래스에 대한 여정을 마쳤습니다. 추상 클래스가 무엇인지 이해하고, 그것을 만드는 방법, 그리고 실제 예제로서의 활용 방법을 보았습니다. 이제 여러분은 이 강력한 TypeScript 기능에 대해 견고한 기초를 다졌습니다.

추상 클래스는 건물의蓝图과 같습니다. 그들은 구조와 일부 세부 사항을 제공하지만, 그것을 확장하는 클래스들이 구체적인 내용을 채우고 생명을 불어넣는 역할을 합니다.

프로그래밍 여정을 계속하면서 추상 클래스는 매우 유용한 도구가 될 것입니다. 그들은 더 청결하고, 더 잘 조직된, 유지보수가 용이한 코드를 작성하는 데 도움을 줄 것입니다. 그러므로 마음껏 추상화하여 사용하시기 바랍니다!

행복하게 코딩하시고, 다음 번에 만날 때까지 탐구하고 배우기를 잊지 마세요!

Credits: Image by storyset

이전 튜토리얼:

TypeScript - 정적 메서드와 속성

다음 튜토리얼:

TypeScript - 액세서