[TypeScirpt] 추상클래스 개념과 type, interface 차이점

1. 추상 클래스

- 추상 클래스는 상속받는 다른 클래스가 가질 property와 메서드를 파악할 수 있도록 도와준다.

- TypeScript에서 추상클래스를 사용하면 JavaScript 컴파일에서는 일반적인 클래스로 보인다.

- 표준화된 property와 메소드를 갖도록 해주는 청사진을 만들기 위해 추상 클래스를 사용한다.

 

2. 추상 클래스 사용법

- 추상 클래스를 정의할 때는 class 앞에 abstract를 작성해주면 된다.

- 추가로 추상메서드를 정의할 때에도 동일하게 메서드 앞에 abstract를 작성해주면 된다.

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

3. type과 interface의 공통점

- type과 interface 모두 객체의 타입을 정의하기 위하여 사용하며 추상 클래스를 대체하여 사용할 수 있다.

 

1) type 예시

type Player = {
  nickname: string;
  team: string;
  healthBar: number;
};

2) interface 예시

interface Player {
  nickname: string;
  team: string;
  health: Health2;
}

 

4. type과 interface의 차이점

 

1) type 

- interface보다 사용하는 방법이 많다.

- &와 |, tuple 사용이 가능하다.

- 보다 더 객체지향 프로그래밍 처럼 보여서 보다 이해하기 쉬워 보인다.

- 동일한 이름의 여러개의 타입을 선언할 수 없다.

- 상속할 때 extends 키워드를 사용한다.

 

2) interface

- 같은 이름을 가진 property들을 여러 개 생성할 수 있으며 이를 선언 병합이라고 한다.

- interface로 선언된 타입은 선언 이후의 타입 확장에 용이하다.

- JavaScript로 컴파일 하면 보이지 않는다.

- private과 protected같은 접근 제한자를 사용할 수 없다.

- Class가 interface를 상속 받을 때 implements 키워드를 사용하고 interface끼리 상속을 하면 extends 키워드를 사용한다.