[TypeScript] Type Aliase vs. Interface, 어떻게 구분해서 사용할까?

내가 일하고 있는 회사에서 타입스크립트로 프로젝트를 진행하고 있다.
나는 아직 타입스크립트에 대해 자세히는 모르지만 기존에 있는 코드를 활용해서 어찌어찌 만들어가고 있다.

그런데 문득, 오늘 이상한(?) 점을 발견했다.
나는 보통 interface 로 타입 정의한 것을 많이 봤는데 일부는 type 으로 정의되어 있는 것이다.
둘의 차이는 = 의 유무 말고 잘 모르겠다.

그래서 둘의 차이점과 어떻게 구분해서 사용해야 하는지 공부해보았다.

📍 Type Aliase와 Interface의 공통점

타입스크립트에서 타입을 정의한다.

interface Burger {
  store: string
  price: number
}

const henry: Burger = {
  store: 'No Brand',
  price: 5000,
};

type Burger = {
  store: string;
  price: number;
};

const henry: Burger = {
  store: 'No Brand',
  price: 5000,
};

📍 Type Aliase와 Interface의 차이점

1. 타입을 확장하는 방식

interface Person {
  name: string
  age: number
}

interface Student extends Person {
  score: number
}

interface 에서 기존 타입을 새로운 타입으로 확장할 때 extends 를 사용한다.

type Person = {
  name: string
  age: number
}

type Student = Person & {
  score: number
}

type 에서는 & 를 사용하여 타입을 확장한다.

2. 타입 재선언

interface Window {
  title: string
}

interface Window {
  ts: import("typescript")
}

위 코드는 interface 로 타입을 지정하고 재선언하여 속성을 추가한 것이다.

type Window = {
  title: string
}

type Window = {
  ts: import("typescript")
}

// Error: Duplicate identifier 'Window'.

만약 type 으로 선언한 타입을 재선언하여 속성을 추가하려고 한다면 에러가 날 것이다.

📍 언제 어떤 것을 사용할까?

interface 는 확장성이 좋아서 자바스크립트 객체가 작동하는 방식에 더 가깝게 매핑된다. (개방-폐쇄 원칙)
따라서 type 보다 interface 를 사용하는 것이 더 좋다.

반면 union 이나 tuple 타입을 사용해야 하는 경우, 별칭을 사용해 가독성 있는 코드를 작성할 때는 type 을 사용하는 것이 좋다.

TS Docs