[TS] type, interface 차이

1. interface는 자바스크립트로 컴파일 되지 않는다.

타입과 인터페이스 모두 추상 클래스를 대체해서 사용할 수 있다.

추상 클래스를 사용하면 자바스크립트에서는 일반적인 클래스로 바뀜. 인터페이스도 비슷한 보호를 제공하지만, 인터페이스는 자바스크립트 파일에서 보이지 않는다.

즉, 인터페이스는 파일 크기가 작아지고 추가 클래스가 생성되지 않는다. 그렇기에 같은 역할을 하는 인터페이스를 쓰는게 더 좋다.

class Player extends User
=> class Player implements User

**type**
  
type PlayerA = {
  firstName:string
}

class User implements PlayerA {
  constructor(
    public firstName:string
  ){}
}

**interface**
  
interface PlayerB {
  firstName:string
}

class User implements PlayerB {
  constructor(
    public firstName:string
  ){}
}

---

2. type은 새 속성을 추가하기 위해 다시 선언될 수 없는 반면 interface는 항상 상속(확장) 가능하다.

**type**
  
type PlayerA = {
  name:string
}

type PlayerAA = PlayerA & { // 중복 추가할 수 없다. 새 타입을 만들어야 한다.
  lastName:sting
}

const playerA: PlayerAA = {
  name:"mina",
  lastName:"xxx"
}

**interface**
[1]
interface PlayerB {
  name:string
}

interface PlayerBB extends PlayerB {
  lastName:sting
}

interface PlayerBB { // 중복 추가할 수 있다.
  health:number
}

const playerB: PlayerBB = {
  name:"mina",
  lastName:"xxx",
  health:1
}

[2]
interface PlayerB {
  name:string
}

interface PlayerB { // 중복 추가할 수 있다.
  lastName:sting
}

interface PlayerB { // 중복 추가할 수 있다.
  health:number
}

const playerB: PlayerB = {
  name:"mina",
  lastName:"xxx",
  health:1
}

타입스크립트에게 오브젝트의 모양을 알려주고 싶다면 타입과 인터페이스를 사용할 수 있다.

오브젝트의 모양과 타입을 알려주는 목표는 같지만 타입을 상속하는 방법이 다르다. (type은 중복으로 추가할 수 없고 새 속성을 만들어야 하지만 interface는 중복 추가해도 자동으로 합쳐짐)

interface는 extends, implements로 확장하며, type은 특수문자 &으로 확장한다.

---

타입스트립트 공식페이지의 문서에서 아래와 같이 상속방법과 확장에 대한 차이를 비교할 수 있다.