[TypeScript] 3. 타입스크립트 Class(클래스)

타입스크립트 Class(클래스)

---

init

JavaScript를 사용하다 보면 데이터와 동작을 효율적으로 묶어 관리해야 할 때가 있습니다. 이때 등장하는 것이 바로 "클래스" 입니다. 클래스는 객체 지향 프로그래밍(OOP)의 핵심 개념 중 하나로, 데이터를 구조화하고 재사용 가능한 코드를 작성하는 데 유용합니다. 이 포스트에서는 JavaScript 클래스의 기본 개념과 구조에 대해 공유합니다.

클래스 (Class)

클래스 몸체에 메소드만을 포함할 수 있다. 클래스 몸체에 클래스 프로퍼티를 선언할 수 없고 반드시 생성자 내부에서 클래스 프로퍼티를 선언하고 초기화한다. 또한, 클래스에서는 메서드를 포함할 수 있으며, 메서드는 클래스 몸체에 정의되어 객체에서 호출할 수 있다.

 

[ 용어 ]

 name: 프로퍼티,  constructor: 생성자(=초기화),  introduce: 메소드

class CodeNinja {
   name: string; // 인스턴스 변수 선언   
   constructor(name: string) {
      this.name = name;
   }   
   introduce() {
    console.log(`내 이름은 ${this.name} 입니다.`); 
   }
}

let codeNinja = new CodeNinja('코드닌자');
codeNinja.introduce(); // 내 이름은 코드닌자 입니다.

---

클래스 상속 (Inheritance)

클래스 상속이란 기존 클래스(부모)의 기능을 새로운 클래스(자식)가 물려받아 확장하거나 재사용할 수 있게 하는 기능이다. 상속을 구현하려면 extends 키워드를 사용한다.

 

[ 클래스 상속 특징 ]

• extends 키워드 사용: 자식 클래스는 extends를 사용해 부모 클래스를 상속받는다.
• 단일 상속: 한 클래스는 하나의 부모 클래스만 상속받을 수 있다.
• 자원 상속: 자식 클래스는 부모 클래스의 모든 프로퍼티와 메서드를 사용할 수 있다.
• 단방향 상속: 부모 클래스는 자식 클래스의 자원을 사용할 수 없다. (is-a 관계)
• 재정의(Override): 자식 클래스는 부모 클래스의 메서드나 프로퍼티를 수정할 수 있다.

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

class Ninja extends CodeNinja {
  level: number;
  constructor(name: string, level: number) {
    super(name); // 부모 클래스(CodeNinja)의 생성자를 호출하여 name을 초기화
    this.level = level;
  }
  introduce() {
    console.log(`이름은 ${this.name} 이고, 레벨은 ${this.level} 입니다.`); 
  }
}

let ninja = new Ninja('코드닌자', 10);
ninja.introduce(); // 이름은 코드닌자 이고, 레벨은 100 입니다.

 

위코드에서 Ninja 클래스는 extends 키워드를 사용하여 CodeNinja라는 부모 클래스를 상속 받았다.

이때 상속을 해주는 상위 클래스를 수퍼 클래스(Super Class)라고 하고, 상속을 받는 하위 클래스를 서브 클래스(Sub Class)라고 한다.

 

클래스를 상속하면, 부모 클래스의 프로퍼티와 메서드를 자식 클래스가 물려받게 되어, 부모 클래스의 기능을 자유롭게 활용할 수 있게 된다. 클래스를 상속하게 되면, 부모 클래스의 자원들을 맘껏 사용할 수 있게 된다.

---

클래스 접근 제어자 ( Public, Private, Protected)

타입스크립트에서는 클래스의 프로퍼티와 메서드에 접근을 제어하기 위해 접근 제어자를 사용.

이를 통해 데이터의 보호와 클래스 설계를 명확히 할 수 있다.

 

1) public

• 클래스 외부에서 접근이 가능
• 선언하지 않아도 기본적으로 public으로 설정

class Example {
  public name: string = "Public Property";
}

const ex = new Example();
console.log(ex.name); // "Public Property"

 

2) private

• 외부 또는 상속받은 클래스에서도 접근이 불가능하다.
• 클래스 내부에서만 접근할 수 있다.

class Example {
  private secret: string = "Private Property";

  revealSecret() {
    return this.secret;
  }
}

const ex = new Example();
console.log(ex.revealSecret()); // "Private Property"
// console.log(ex.secret); // 오류 발생

 

3) protected

• 클래스 내부와 상속받은 자식 클래스에서만 접근 가능하다.
• 외부에서는 접근할 수 없음.

class Parent {
  protected value: number = 42;
}

class Child extends Parent {
  getValue() {
    return this.value;
  }
}

const child = new Child();
console.log(child.getValue()); // 42
// console.log(child.value); // 오류 발생

---

Readonly 속성

readonly 키워드는 읽기 전용(Read-only) 속성을 정의하는 데 사용된다. 선언된 후에는 값을 변경할 수 없다.

 

[특징]

• readonly는 초기화 시점(생성자 또는 선언 시)에만 값을 할당할 수 있습니다.
• 클래스 외부나 내부에서 값을 변경하려 하면 오류가 발생합니다.

class Example {
  readonly id: number;

  constructor(id: number) {
    this.id = id;
  }
}

const ex = new Example(123);
console.log(ex.id); // 123
// ex.id = 456; // 오류 발생: 읽기 전용 속성은 수정할 수 없습니다.

---

Override (오버라이드)

오버라이드는 자식 클래스에서 부모 클래스의 메서드를 재정의하여 자신만의 로직을 구현할 때 사용됩니다. 오버라이드시 부모 클래스의 메서드 이름과 동일해야한다.

 

[오버라이딩 조건]

• 매개변수 숫자가 같아야 한다. 단, 매개변수명은 달라도 된다.
• 매개변수 타입이 같거나, 하위 타입이여야 한다.
• 리턴 타입이 같아야 한다.

class Parent {
    shout(name: string){
        return `${name}야 안녕!`;
    }
}

class Child extends Parent{
    shout(name: string): string {
       return super.shout(name);
    }
}

const child = new Child();
console.log(child.shout('코드닌자')); //코드닌자

---

Abstract Class (추상 클래스)

추상 클래스는 공통적인 기능을 정의하고, 상속받은 클래스에서 구체적인 구현을 강제할 때 사용된다. 

 

[추상클래스 특징]

• abstract 키워드를 사용해 선언
• 인스턴스를 직접 생성할 수 없다
• 추상 메서드(abstract)는 자식 클래스에서 반드시 구현해야 한다

abstract class Animal {
  abstract makeSound(): void;

  move(): void {
    console.log("Moving...");
  }
}

class Dog extends Animal {
  makeSound(): void {
    console.log("Bark!");
  }
}

const dog = new Dog();
dog.makeSound(); // "Bark!"
dog.move(); // "Moving..."

 

오늘도 감사합니다