type 과 interface 의 차이점

타입과 인터페이스는 매우 유사해서, 둘 중 하나를 자유롭게 선택하여 사용할 수 있다.

인터페이스 대부분의 기능은 타입에도 동일하게 사용 가능하다.

 

가장 큰 차이점으론 타입은 새 property를 추가하기 위해 다시 선언 될 수 없지만, 인터페이스는 가능하다.

 

확장 방법의 차이 1

 

인터페이스의 상속

Bear 인터페이스를 선언하고, extends Animal 으로 상속받아 확장한다.

interface Animal {
  name: string
}

interface Bear extends Animal {
  honey: boolean
}

const bear = getBear()
bear.name
bear.honey

 

 

타입의 상속

Animal 타입 생성 후 새 타입을 만들고 & 연산자로 교집합을 통해 타입을 확장한다.

type Animal = {
  name: string
}

type Bear = Animal & {
  honey: Boolean
}

const bear = getBear();
bear.name;
bear.honey;

 

 

확장 방법의 차이 2

 

기존의 인터페이스에 새 필드 추가

같은 인터페이스를 여러개 만들면 하나로 합쳐진다.

interface Window {
  title: string
}

interface Window {
  ts: TypeScriptAPI
}

const src = 'const a = "Hello World"';
window.ts.transpileModule(src, {});

 

타입은 생성된 뒤에는 달라질 수 없음

같은 이름의 타입 생성이 불가하다.

type Windew 를 두번 쓰는 것은 정상적으로 동작하지 않음

type Window = {
  title: string
}

type Window = {
  ts: TypeScriptAPI
}

 // Error: Duplicate identifier 'Window'.

 

 

☀︎ 인터페이스는 object 의 모양을 타입스크립트에게 설명해 주기 위해서만 사용된다. (기존 원시타입으로는 사용 할 수 없음)

☀︎  타입은 인터페이스에 비해 종류에 관계 없이 어떠한 타입으로든 생성할 수 있다.

 

but 타입과 인터페이스는 타입스크립트에게 object의 모양을 설명한다는 같은 목적을 가지고 있음.

 

☀︎ 대체로 타입스크립트에게 object 의 모양을 알려주기 위해서는 인터페이스를 사용하고, 그 외 상황에서는 타입을 사용한다.

 

 

참고

https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#differences-between-type-aliases-and-interfaces

 

 

🧐 느낀점

지난 개인 프로젝트를 하는 동안 타입을 생성할 때, type과 interface를 별 생각없이 썼었는데 타입스크립트에 대한 이해도가 많이 부족하다고 느껴서 좀 더 찾아보고 공부했다. 앞으로 타입을 생성할 때 두가지의 차이를 이해하고 좀 더 적절한 상황에서 사용해보자.