타입스크립트 class

typescript도 javascript와 마찬가지로 class를 사용가능하다. 그렇지만 typescript는 자바스크립트와 class 에서는 크게 다른점이 있다

접근 제한자의 사용가능

• public
• private
• protected

접근제한자의 사용이 가능하다는 점이다.

Typescript의 경우

class Player {
  constructor(
    private firstname: string,
    private secondname: string,
    public nickname: string
  ) {}
}

const park = new Player("park", "changhee", "appletrick");

JS에서 처럼 불편하게 this.? = ? 를 사용할 필요가 없어진다.

위의 코드를 JS에서는 다음과 같아진다.

Javascript의 경우

class Player {
  constructor(firstname, secondname, nickname) {
    this.firstname = firstname;
    this.secondname = secondname;
    this.nickname = nickname;
  }
}
const park = new Player("park", "changhee", "appletrick");

확실히 가독성면에서 TS가 훨씬 앞선다.

추상 클래스, 추상 메서드의 사용 가능

TS에서는 추상 클래스와 추상 메서드의 사용이 가능하다.

자세한 내용을 코드를 보면서 이해하자

Typescript

abstract class User {
  // 1️⃣ 추상클래스 선언
  constructor(
    private firstname: string,
    private secondname: string,
    protected nickname: string // 3️⃣ protected 접근제한자를 이용하여 자식요소에서도 사용
  ) {}

  abstract getNickName(): void; // 2️⃣ 추상메서드의 선언 User 클래스를 상속받을경우 반드시 해당 메소드를 재선언해줘야됨

  getFullName() {
    // 4️⃣ method 에서도 접근제한자 사용 가능
    return `${this.firstname} ${this.secondname}`;
  }
}

class Player extends User {
  // 1️⃣ 추상클래스를 상속 받음
  getNickName() {
    // 2️⃣ 추상메서드 완성
    console.log(this.nickname); // 3️⃣ protected 로 인해 해당 value에 접근 가능
  }
}

const park = new Player("park", "changhee", "appletrick");

1️⃣ User 추상 클래스를 선언해주고 Player 클래스에서 User 클래스를 상속 받았다.

2️⃣ User 추상클래스에서 getNickName 이라는 추상 메서드를 선언해주었다. 때문에 Player 클래스에서도 추상메서드 getNickName에 대한 내용을 다시 작성해줘야된다.

3️⃣ Player 클래스에서 nickname에 대한 값을 사용하려면 상속받는 클래스에서 값을 사용해야된다. 때문에 접근제한자를 protected 로 변경하여 상속받는 값에서도 this를 사용할 수 있게 만들어준다.

4️⃣ 추상 클래스에서 메소드에서도 접근제한자 지정이 가능하다

Javascript의 경우

class User {
  constructor(firstname, secondname, nickname) {
    this.firstname = firstname;
    this.secondname = secondname;
    this.nickname = nickname;
  }
  getFullName() {
    return `${this.firstname} ${this.secondname}`;
  }
}
class Player extends User {
  getNickName() {
    console.log(this.nickname);
  }
}
const park = new Player("park", "changhee", "appletrick");

Javascript도 동일하게 사용할 수 있지만 접근제한자 부분이 없으므로 강력하게 오류나 틀린부분을 찾기 어려워진다.

결론

TS로 클래스 문법을 사용하면 엄격하고 규격있게 사용된다. 때문에 잘못된 부분이 있으면 빠르게 오류를 표기해주므로 쉽게 인지할 수 있다. JS에서도 쉽게 사용가능하지만 그만큼 부족한 부분도 생긴다.