TypeScript - 클래스와 인터페이스 (1) Classes

Younkyum J·2022년 7월 8일
0

TypeScript

목록 보기
7/8
post-thumbnail

클래스 | Class

Player 클래스를 만들어보자.

class Player {
  constructor(
  	private firstName: string,
    private lastName: string
  ) {}
}

원래 자바스크립트였다면, 다음과 같이 선언해야 했을 것이다.

class Player {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
}

따라서 TS에서 클래스의 constructor는 조금 더 간단한 코드로 작성할 수 있다.

Private 와 Public

퍼블릭 변수와 프라이빗 변수를 클래스 내에 설정할 수 있다.
예를 들어보면,

class Player {
  constructor(
  	private firstName: string,
    private lastName: string,
    public nickName: string
  ) {}
}

const onve = new Player("onve",, "jin", "YK")

이때 보면, 성과 이름은 private 변수이지만, nickName은 public 변수이다.
따라서 실제 사용할 경우에는 public만 사용이 가능하다.

onve.nickName // YK
onve.lastName // Error
onve.firstName // Error

이를 사용하면, 클래스 내의 프로퍼티를 효과적으로 보호할 수 있다.
또한, 클래스를 상속하는 경우에도 private는 보호받으므로 상속했을 때 변경하고 싶다면 public이나 protected으로 작성해주어야 한다.


추상클래스 | Abstract Class

TS도 객체지향프로그래밍 언어에 있는 추상 클래스를 사용할 수 있다.

abstract class User {
  constructor(
  	private firstName: string,
    private lastName: string,
    public nickname: string
  ) {}
}

class Player extends User {
  
}

추상 클래스란 오직 상속만 가능한 클래스이다. 실제로 변수의 클래스로는 사용할 수 없는 것이다.

const onve = new User() // Error: Cannot create an instance of an abstract class

추상 클래스 내부의 메소드 | Methods of Abstract Class

메소드 또한 추상 클래스 내부에서 선언할 수 있다.

abstract class User {
  constructor(
  	private firstName: string,
    private lastName: string,
    public nickname: string
  ) {}
  
  getFullName() {
    return '${this.firstName} ${this.lastName}'
  }
}

class Player extends User {
  
}

const onve = new Player("onve",, "jin", "YK")
onve.getFullName()

추상 메소드 | Abstract Class

추상 메소드 또한 존재한다. 이런 경우에는 abstract를 통해서 Call Signature만 작성하면 된다.
그러면 상속받은 Class에서 다음과 같은 오류가 발생한다.

abstract class User {
  constructor(
  	private firstName: string,
    private lastName: string,
    private nickname: string
  ) {}
  
  abstract getNickName(): void
}

class Player extends User {} 
// Non-abstract class 'Player' does not implement inherited abstract member 'getNickName' from class 'User'.

따라서 상속받는 클래스 내에서 메소드 구현을 해야 한다.

class Player extends User {
  getNickName() {
    console.log(this.nickname) // Error
  }
}

하지만, 여기서 nickname은 private함수이므로 User를 상속받은 Player도 사용할 수 없다.
따라서, 추상 메소드를 사용할 때 추상 클래스 내의 프로퍼티를 사용하려면 protected를 사용하는 편이 좋다.




*본 내용은 노마드코더 "Typescript로 블록체인 만들기"에서 습득한 내용을 바탕으로 재구성한 것 입니다.

profile
기획자입니다. 근데 이제 고양이와 애플덕후와 개발을 곁들인.

0개의 댓글