[TypeScript] 클래스 (Class) #5

본 포스팅은, '캡틴판교'님이 작성하신 '타입스크립트 핸드북'을 보고 스스로 정리하기 위해 작성하는 포스팅입니다. 자세한 내용은 https://joshua1988.github.io/를 참고해주세요!

1. readonly

클래스의 속성에 readonly 키워드를 사용하면 아래와 같이 접근만 가능하다.

class Developer {
    readonly name: string;
    constructor(theName: string) {
        this.name = theName;
    }
}

let john = new Developer("john");
john.name = "sol"; // Error! name is readonly.

이처럼 readonly를 사용하면 constructor() 함수에 초기 값 설정 로직을 넣어줘야하므로 다음과 같은 인자에 readonly 키워드를 추가해서 코드를 줄일 수 있다.

class Developer {
    readonly name: string;
    constructor(readonly name: string) {

    }
}

console.log(new Developer("john"));

2. Accessor

타입스크립트는 객체의 특정 속성의 접근과 할당에 대해 제어할 수 있다.
이를 위해선 해당 객체가 클래스로 생성한 객체여야 한다. 아래의 간단한 예제를 보자.

class Developer {
    name: string;
}

const josh = new Developer();
josh.name = 'josh';

위 코드는 클래스로 생성한 객체의 name 속성에 Josh Bolton이라는 값을 대입한 코드이다. 이제 josh라는 객체의 name 속성은 Josh Bolton이라는 값을 가지게 된다.

여기서 만약 name 속성에 제약 사항을 추가하고 싶다면 아래와 같이 get과 set을 활용한다.

class Developer {
  private name: string;
  
  get name(): string {
    return this.name;
  }

  set name(newValue: string) {
    if (newValue && newValue.length > 5) {
      throw new Error('이름이 너무 깁니다');
    }
    this.name = newValue;
  }
}
const josh = new Developer();
josh.name = 'Josh Bolton'; // Error
josh.name = 'Josh';

get만 선언하고 set을 선언하지 않은 경우에는 자동으로 readonly로 인식된다.

3. Abstract Class

추상 클래스(Abstract Class)는 인터페이스와 비슷한 역할을 하면서도 조금 다른 특징을 갖고 있다. 추상 클래스는 특정 클래스의 상속 대상이 되는 클래스이며 좀 더 상위 레벨에서 속성, 메소드의 모양을 정의한다.

abstract class Developer {
  abstract coding(): void; // 'abstract'가 붙으면 상속 받은 클래스에서 무조건 구현해야 함
  drink(): void {
    console.log('drink sth');
  }
}

class FrontEndDeveloper extends Developer {
  coding(): void {
    // Developer 클래스를 상속 받은 클래스에서 무조건 정의해야 하는 메서드
    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