Typescript 개념잡기(6)

계속하자. 이번에는 클래스에 대한 내용이다.

타입스크립트 핸드북(타입스크립트 핸드북)을 보고 공부한 것을 정리한 글입니다.
기본적인 JS 지식은 가진 상태라고 가정합니다.

readonly

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

class Developer {
  readonly name: string;
  constructor(theName: string) {
    this.name = theName;
  }
}
let john = new Developer("John");
john.name = "John" // error! name is readonly.

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

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

Accessor

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

아래 예제를 살펴보자.

class Developer {
  name: string;
}
const josh = new Developer();
josh.name = "Josh Bolton";

위 코드는 클래스로 생성한 객체의 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;
  }
}
cosnt josh = new Developer();
josh.name = "Josh Bolton"; //Error
josh.name = "Josh";

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

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

지금까지 타입스크립트에서 추가된 클래스 관련 키워드를 살펴보았다.