개요

typescript에서 타입을 만들때
type alias, interface 두가지 사용방식이 있다.

기본적인 사용 방법의 차이에 대한 글은 이미 인터넷에 많이 있다.
그 외 type alias와 interface를 선택할때 고려할 만한 부분들은 어떤게 있는지 대해 정리해보려고 한다.

typescript 위키나, 핸드북 문서를 보면 일단 interface를 추천하고있다. (확장성의 의미에서)

그리고 typescript를 처음 공부했을 당시에,
interface가 성능이 더 좋다는 글을 여기저기서 본 기억이 있지만,
이유는 정확히 기억나지 않았다.

1. 개발경험

먼저 아래처럼 같은 형태의 타입을 두가지 방식으로 만들어보았다.

type CustomType = {
  abc: string;
}

interface CustomInterface {
  abc: string;
}

모두 같은 형태의 타입이지만, 이 타입을 사용하여 개발할때 IDE에서 차이가 발생한다.

위 이미지처럼 타입에 마우스를 올려놓았을때 미리보기가 뜨게 되는데 (vscode, webstorm 등)
type alias의 경우 형태를 보여주고, interface는 보여주지 않는다.

이 차이로 인해 타입의 형태를 확인해야 하는경우
해당 타입이 정의된 곳으로 가서 확인해야 하거나, 미리보기만 봐도 되거나 두가지 케이스로 나뉘게 된다.

개인적으로는 미리보기에서 형태를 제공하여
현재 보고있는 코드에서 벗어나지 않아도 되는 type alias가 개발경험이 훨씬 좋았다.

2. 성능

type alias, interface의 성능이라 함은 IDE 내에서 typescript service가 코드를 파악하는 속도 혹은 빌드시간을 말한다.
이는 매우 큰 프로젝트에서는 느려질 수 있고, 개발 경험을 해칠 수 있다.

관련 자료를 찾아보다가 아래와 같은 영상을 발견했다.

위 영상의 23초 즈음에서 interface is faster than types라고 언급하면서
typescript performance Wiki에 관련 내용이 있다고 한다.
(지금은 문서에서 내용이 사라졌는지 안보이는듯..?)

그래서 Matt Pocock(위 유튜버)이 직접 수천개의 type alias, interface를 작성해서 성능 비교를 해보니 별 차이가 없어서
typescript team과 많은 논의를 해본 결과
type, interface 중 어떤걸 쓰느냐는 성능에 영향을 끼치는 중요한 요소는 아니라고 한다.

이 외에도 영상에서 여러가지 고려할 것들에 대해 제안해줘서 한번 시청해 보는것을 권장한다.

3. 일관성

type alias던 interface던 뭘 쓰든 그게 무슨 문제냐는 의견도 있을 수 있다.

하지만 interface로 만들 수 있는 타입은 type alias로 모두 작성 가능한 반면,
반대로는 불가하다.

object 형태의 타입을 선언할때는 interface를 사용하고, 튜플타입을 작성할때는 type alias로 작성하고...
안될건 없지만 굳이..? 라는 생각은 든다.

반면 type alias 사용을 기본 컨벤션으로 가져가면 코드의 일관성이라는 장점은 얻을 수 있다.

4. 확장성의 양면

interface는 javascript처럼 확장성을 지니는데

interface Person {
  name: string;
}
interface Person {
  speak(): void;
}
const person: Person = {
  name: 'Mike',
  speak: () => {},
}

위 코드처럼 같은 스코프 내에 같은 이름의 interface가 존재하면 merge되는 특성이 있다.
이 특성은 사용이 필요한 케이스가 있으니 이렇게 설계 되었을 것이다.

하지만 이러한 유형의 interface를 사용하는 개발자는 항상 어디서 어떻게 merge되는지
머릿속으로 추적하면서 사용해야 한다. (양날의 검)
이는 예측가능하지 않은 케이스를 유발 할 수 있으며,
어디서 타입이 확장되는지 찾기 번거로울 수 있다.

반면 type alias의 경우, 같은 스코프 내에 같은 이름의 타입을 중복 선언 할 수 없으므로,
타입 확장이 필요한 경우 다른이름으로 재선언 하여 사용해야 한다.
타입의 형태가 의도치않게 확장되어 섞이는 경우는 기본적으로 방지되니 고려하지 않아도 된다.

결론

개인적으로는 interface를 사용해야하는 특정한 경우 외에는
type alias를 기본적으로 사용하는 편이 여러모로 장점이 많다고 느껴진다.

어차피 interface 사용을 완전히 막을 수도 없기도 하고,
interface라는 키워드를 선호 할 수도 있고, 그게 더 가독성이 좋다고 느끼는 사람도 있을 수 있다.

내가 작업할때 type alias를 주로 쓰는 가장 큰 이유는 IDE 미리보기에서 타입 형태가 보인다는 점이다. (1. 개발경험)
팀에서 협업을 하는 프로젝트에서는 컨벤션으로 type alias를 쓰자고 제안은 할것같다.

출처

https://github.com/microsoft/TypeScript/wiki/Performance#preferring-interfaces-over-intersections
https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#differences-between-type-aliases-and-interfaces
https://www.youtube.com/embed/zM9UPcIyyhQ?si=p01PtsmPUvQ9iPwV
https://github.com/microsoft/TypeScript/wiki/Performance