[TypeScript] 클래스

클래스

• 자바스크립트 에서 클래스를 사용했듯이, 타입스크립트에서도 사용 가능하다.

TS 클래스의 타입 선언

• 타입스크립트에서는 타입을 명시해야한다는 점에서 구분.

자바스크립트

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
const person = new Person("jaegeon", 26);
console.log(person);

타입스크립트

class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}
const person = new Person("jaegeon", 26);
console.log(person);

TS 클래스의 접근 제어자

• 타입스크립트에서는 속성이나 메서드에 대한 접근을 제한하도록 키워드를 사용.

  키워드	설명
  public (기본)	어디서든 접근 가능
  protected	클래스 및 자식 클래스에 접근 가능
  private	클래스 내부에만 접근 가능

• private의 문제점

  분명 클래스 내부에서만 사용할 수 있는데,
  생성된 객체를 호출할 때, 속성(멤버)이 나타나는 문제

    class Person {
      private name: string;
      private age: number;
      
      constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
      }
    }
    const person = new Person("jaegeon", 26);
    console.log(person); // 멤버가 모두 출력됨
  

  

• # 키워드 (ES2022 이후 지원)

  private와 기능은 동일,
  생성된 객체를 호출할 때, 속성 또한 나타나지 않는다!

    class Person {
      #name: string;
      #age: number;
      
      constructor(name: string, age: number) {
        this.#name = name;
        this.#age = age;
      }
    }
    const person = new Person("jaegeon", 26);
    console.log(person);
  

  

TS 클래스의 readonly 키워드

• 타입스크립트에서는 한 번 할당된 이후, 변경할 수 없는 속성을 만들 수 있음

• 읽기 전용 필드를 정의함.

    class Person {
      readonly name: string;  // 읽기 전용
      age: number;
      
      constructor(name: string, age: number) {
        this.name = name;  // ✅ 초기 할당 가능
        this.age = age;
      }
    }
      
    const person = new Person("jaegeon", 26);
    console.log(person.name);       // jaegeon
      
    person.name = "hong";           // ❌ 에러(수정 불가)
  

TS 클래스의 추상 클래스

• 클래스의 구조를 추상적으로 미리 정의해 놓은 클래스
• abstract 키워드를 사용하여 추상 클래스를 생성.
  ⇒ 각각의 클래스와 속성 앞에 제시.
• extends 키워드를 사용하여 상속 받아서 클래스를 구현함.
• super() 를 사용하여 추상 클래스의 구조를 가져옴.

• 구현을 위해 접근제어자를 추가하기도 함.

    abstract class Shape {
      abstract area(): number;
      abstract radius: number;
    }
    class Circle extends Shape {
      constructor(public radius: number) {
        super();
      }
      area() {
        return Math.PI * this.radius;
      }
    }
  

• 클래스는 추상 클래스 하나만 상속 가능하다.(다중 상속 X)

TS 클래스의 인터페이스와 타입 상속

• 클래스는 타입 별칭과 인터페이스를 상속해서 사용가능하다.
• 추상 클래스와 다르게, 다중 상속이 가능하다.
• implements 키워드를 사용하여 상속 받아서 사용.

TS 클래스의 제네릭

• 앞서 배운 제네릭을 클래스에서도 사용 가능하다.

• 클래스명 옆에 제네릭을 제시해서 사용한다.

    class Box<T> {
      value: T;
      constructor(value: T) {
        this.value = value;
      }
      getValue() {
        return this.value;
      }
    } 
      
    const stringBox: Box<string> = new Box<string>("abc");
    console.log(stringBox.getValue());
  

---

클래스 상속

• 클래스끼리 상속도 가능하다.
• 역시, extends 키워드를 사용하여 상속 받는다.
• super() 를 사용하여, 자식 클래스는 부모 클래스의 생성자 호출이 가능하다.
• 자식 클래스는 부모 클래스의 속성과 메서드 모두를 사용할 수 있다.
  (접근제어자에 의해 막히지만 않는다면)

• 예시

    class Employee {
      name: string;
      constructor(name: string) {
        this.name = name;
      }
      
      getSalary() {
        console.log("Salary!");
      }
    }
      
    class Manager extends Employee {
      role: string;
      constructor(name: string, role: string) {
        super(name);
        this.role = role;
      }
      getManager() {
        console.log(`${this.name}: ${this.role}`);
      }
    }
      
    const employee = new Employee("John");
    employee.getSalary();
    const manager = new Manager("Mike", "admin");
    manager.getSalary();
    manager.getManager();
  

부모 클래스의 접근 제어

• 앞서 배운 접근 제어자를 활용하면,
  특정 속성과 메서드에 대해 자식 클래스의 접근을 막을 수 있다.
• protected의 키워드
  해당 키워드를 사용하여, 자식 클래스의 접근은 가능하면서,
  외부로부터 안전한 속성과 메서드를 가질 수 있다.