2023.05.26) 타입스크립트의 클래스 & 인터페이스 (1)

1. classes

자바스크립트와 동일하게 타입스크립트에도 class가 있다.

다만, 차이점도 존재한다.

1. 어떤 보호 등급인지, 이름, 타입을 적어준다.
2. 문법 오류나 오용 등을 거르고 컴파일 될 때 걸러지게 된다.

//JavaScript code
class Player {
	constructor(firstname, lastname, nickname) {
    	this.firstname = firstname;
        this.lastname = lastname;
        this.nickname = nickname;
    }
}
const ori = new Player("ori", "park", "박오리");

위와 같이 자바스크립트에서는 this를 꼭 써주어야 했지만,

타입스크립트에서는 그냥 써주면 된다.

객체필드도 사용용도에 따라 적어줄 수 있다.

public 혹은 private 등이 있는데,

private 써준 건 객체 밖에서 사용할 수 없다.

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

const olaf = new Player("olaf", "park", "박올라프")

 

2. Astract Class

추상 클래스란 다른 클래스가 상속받을 수 있는 클래스이다.

다만, 이 클래스는 직접 새로운 인스턴스를 만들 수는 없다.

즉, 추상 클래스는 오직 다른 곳에서 상속받을 수만 있는 클래스이다.

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

class Player extends User {
  // 추상 메서드는 추상 클래스를 상속받는 클래스들이 반드시 구현해야하는 메서드.
  getNickname() {
    console.log(this.nickname)
  }
}

// 불가
const ori = new User("ori", "park", "박오리")
// 가능
const olaf = new Player("olaf", "park", "박올라프")

클래스의 메소드 getFullName이 무어을 구현해야하는지 단서를 주는 것이다.

상속받은 클래스는 상속을 준 클래스의 메소드도 사용 가능하다.

olaf.getFullName();
olaf.getNickname();

 

3. Method in Abstract Class

메소드는 클래스 안에 있는 함수를 말한다.

물론 추상화를 쓸 수 있다.

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

class Player extends User {
  // 추상 메서드는 추상 클래스를 상속받는 클래스들이 반드시 구현해야하는 메서드.
  // 즉, getNickname을 꼭 구현해야한다.
  getNickname() {
    console.log(this.firstName)
    console.log(this.nickname)
  }
}