TypeScript - 상속

안녕하세요, 미래의 프로그래머 여러분! 오늘 우리는 TypeScript 상속의 세계로 흥미로운 여정을 떠납니다. 여러분의 친절한 이웃 컴퓨터 선생님이자 저는 이 fascinante 주제를 안내해 드리기 위해 여기 있습니다. 그러면 가상의 배낭을 챙기고, 함께 뛰어들어보겠습니다!

TypeScript - Inheritance

상속이란?

시작하기 전에, 상속이 정말 무엇을 의미하는지 이해해 보겠습니다. 가족 나무를 만들어 보세요. 각 새로운 세대는 부모로부터 특정한 특성을 상속받습니다. 프로그래밍에서 상속은 비슷하게 작동합니다. 새로운 클래스가 기존 클래스를 기반으로 하여 그의 프로퍼티와 메서드를 상속받을 수 있습니다. 멋지죠?

단일 클래스 상속

가장 간단한 형태의 상속에서 시작해 보겠습니다: 단일 클래스 상속. 이는 하나의 클래스(자식 클래스)가 다른 클래스(부모 클래스)로부터 상속되는 것입니다.

기본 예제

class Animal {
name: string;

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

makeSound(): void {
console.log("어떤 일반적인 동물 소리");
}
}

class Dog extends Animal {
breed: string;

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

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

let myDog = new Dog("Buddy", "골든 리트리버");
console.log(myDog.name);  // 출력: Buddy
console.log(myDog.breed); // 출력: 골든 리트리버
myDog.makeSound();        // 출력: 와우! 와우!

이 예제에서, Dog은 Animal을 상속받고 있습니다. extends 키워드는 다른 클래스의 자식 클래스를 만들기 위해 사용됩니다.

설명

우리는 name 프로퍼티와 makeSound 메서드를 가진 기본 Animal 클래스를 정의합니다.
그런 다음 Animal을 상속하는 Dog 클래스를 만듭니다.
Dog 클래스는 자신의 breed 프로퍼티를 가집니다.
Dog 생성자에서 super 키워드를 사용하여 Animal 생성자를 호출합니다.
Dog 클래스에서 makeSound 메서드를 오버라이드합니다.

Super 키워드

이전 예제에서 super 키워드를 발견했을 수 있습니다. 그것이 무엇을 하는지 더 깊이 탐구해 보겠습니다.

Super를 사용한 예제

class Vehicle {
make: string;
model: string;

constructor(make: string, model: string) {
this.make = make;
this.model = model;
}

getInfo(): string {
return `${this.make} ${this.model}`;
}
}

class Car extends Vehicle {
numDoors: number;

constructor(make: string, model: string, numDoors: number) {
super(make, model);
this.numDoors = numDoors;
}

getInfo(): string {
return `${super.getInfo()} with ${this.numDoors} doors`;
}
}

let myCar = new Car("Toyota", "Corolla", 4);
console.log(myCar.getInfo()); // 출력: Toyota Corolla with 4 doors

설명

super 키워드는 Car 생성자에서 Vehicle 생성자를 호출하는 데 사용됩니다.
Car의 getInfo 메서드에서 super.getInfo()를 사용하여 부모 클래스의 getInfo 메서드를 호출합니다.

super 키워드는 부모 객체에서 함수에 접근하고 호출할 수 있게 합니다.

메서드 오버라이딩

메서드 오버라이딩은 자식 클래스가 부모 클래스에서 이미 정의된 메서드에 대해 특정한 구현을 제공하는 것입니다. 우리는 이미 두 가지 예제에서 이를 본 적이 있습니다!

메서드 오버라이딩의 다른 예제

class Shape {
getArea(): number {
return 0;
}
}

class Circle extends Shape {
radius: number;

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

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

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

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

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

let myCircle = new Circle(5);
console.log(myCircle.getArea()); // 출력: 78.53981633974483

let myRectangle = new Rectangle(4, 5);
console.log(myRectangle.getArea()); // 출력: 20

설명

우리는 getArea 메서드를 반환하는 기본 Shape 클래스를 가집니다.
Circle과 Rectangle 클래스는 모두 Shape을 상속하고 getArea 메서드를 자신의 구현으로 오버라이드합니다.
Circle 클래스는 πr² 공식을 사용하여 면적을 계산합니다.
Rectangle 클래스는 너비와 높이를 곱하여 면적을 계산합니다.

다단계 상속

다단계 상속은 자식 클래스가 다른 자식 클래스로부터 상속되는 것입니다. 여러 세대가 있는 가족 나무와 같습니다.

다단계 상속 예제

class Grandparent {
surname: string;

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

getSurname(): string {
return this.surname;
}
}

class Parent extends Grandparent {
firstName: string;

constructor(firstName: string, surname: string) {
super(surname);
this.firstName = firstName;
}

getFullName(): string {
return `${this.firstName} ${this.getSurname()}`;
}
}

class Child extends Parent {
middleName: string;

constructor(firstName: string, middleName: string, surname: string) {
super(firstName, surname);
this.middleName = middleName;
}

getFullName(): string {
return `${this.firstName} ${this.middleName} ${this.getSurname()}`;
}
}

let myChild = new Child("John", "Doe", "Smith");
console.log(myChild.getFullName()); // 출력: John Doe Smith

설명

우리는 surname 프로퍼티를 가진 Grandparent 클래스를 가집니다.
Parent 클래스는 Grandparent을 상속하고 firstName 프로퍼티를 추가합니다.
Child 클래스는 Parent을 상속하고 middleName 프로퍼티를 추가합니다.
각 클래스는 자신의 getFullName 메서드를 가집니다.

상속 메서드 요약

여기서 우리가 논의한 주요 메서드와 키워드를 요약하는 표를 보여드리겠습니다:

메서드/키워드	설명
`extends`	다른 클래스의 자식 클래스로 만들기 위해 사용됨
`super()`	부모 클래스의 생성자를 호출
`super.method()`	부모 클래스의 메서드를 호출
메서드 오버라이딩	자식 클래스에서 부모 클래스의 메서드를 새로운 구현으로 제공

그렇게 되면! TypeScript에서 상속의 기본을 다루었습니다. 연습이 완벽을 만드는 것을 잊지 마세요, 따라서 이 개념들을 실험해 보세요. 미래의 TypeScript 마법사 여러분, 즐거운 코딩을 기원합니다!

Credits: Image by storyset

이전 튜토리얼:

TypeScript - 읽기 전용 속성

다음 튜토리얼:

TypeScript - 정적 메서드와 속성