Type vs Interface, 언제 어떻게?

TypeScript에서 Type Alias와 Interface의 차이를 알아보기

이 포스트는 2020년 10월 4일 기준 TypeScript의 최신 버전인 4.0.2 버전에 기반하여 작성하였습니다.

타입스크립트를 이용해 개발하다가 보면 반드시 마주치는 문제가 있습니다. 바로 ‘Type Alias와 Interface 둘 중 어느 것을 사용해 타입을 정의할까?’ 라는 문제입니다.

이번 포스트에서는 두 키워드 간의 차이를 알아보고, TypeScript 팀에서 권장하는 방법까지 간단하게 알아보겠습니다.

Type Alias와 Interface의 공통점

타입에 대한 이름 지어주기

Type Alias 와 Interface 둘 다 타입에 대해 비슷한 방식으로 이름을 지어줄 수 있습니다.

(제한적으로) 여러 타입에 대한 관계 정의

Type Alias 와 Interface 둘 다, Interface에 대한 extends와 Class에 대한 implements 키워드를 사용하여 관계를 정의할 수 있습니다.

주의할 점은, 객체 타입이나 객체 타입 간의 곱 타입(Intersection Type, 교차 타입), 즉 정적으로 모양을 알 수 있는 객체 타입만 동작합니다. 따라서, 합 타입(Union Type, 결합 타입)은 extends와 implements 대신 다른 키워드로 관계를 정의해야 합니다.

Type Alias로 만들어진 정적 타입에 extends, implements 키워드가 사용 가능한 사실은 공식 문서에 명시되어 있지 않습니다.

이외 많은 일

위 두 가지 이외에도, 제네릭과 같이 둘 다 비슷한 방식으로 사용할 수 있습니다.

Type Alias와 Interface의 차이점

Type Alias와 Interface를 살펴보았을 때 서로 대부분의 기능을 공유하고 있습니다. 언뜻 보면 ‘둘을 왜 구분해놓았을까?’ 라고 생각하실 수도 있습니다.

그런데 둘의 큰 차이가 하나 있습니다. Interface는 선언 병합이 가능하지만, Type Alias는 그렇지 않습니다.

Interface의 선언 병합

Interface는 동일한 이름으로 여러 번 선언해도 컴파일 시점에 아래처럼 합칠 수 있습니다. 이런 동작을 선언 병합(Declaration Merging)이라고 합니다.

TypeScript 팀의 의도

TypeScript 팀은 개방-폐쇄 원칙에 따라 확장에 열려있는 JavaScript 객체의 동작 방식과 비슷하게 연결하도록 Interface를 설계했습니다.

그래서 TypeScript 팀은 가능한 Type Alias보단 Interface를 사용하고, 합 타입 혹은 튜플 타입을 반드시 써야 되는 상황이면 Type Alias를 사용하도록 권장하고 있습니다.

정리

필자의 입장

저는 Interface를 주로 사용하고 있습니다. 가능한 TypeScript 팀이 권장하는 방향으로 사용하시기를 권하나, 그렇지 않은 상황에선 아래 두 가지를 권해드립니다.

팀 레벨 혹은 프로젝트 레벨에서 지정한 컨벤션에 따라 일관성 있게 사용하기

외부에 공개할 API는 Interface 사용하기 (선언 병합을 위해)

출처

https://www.typescriptlang.org/docs/handbook/advanced-types.html#interfaces-vs-type-aliases

https://medium.com/@martin_hotell/interface-vs-type-alias-in-typescript-2-7-2a8f1777af4c

Get to know us better! Join our official channels below.

Telegram(EN) : t.me/Humanscape KakaoTalk(KR) : open.kakao.com/o/gqbUQEM Website : humanscape.io Medium : medium.com/humanscape-ico Facebook : www.facebook.com/humanscape Twitter : twitter.com/Humanscape_io Reddit : https://www.reddit.com/r/Humanscape_official Bitcointalk announcement : https://bit.ly/2rVsP4T Email : support@humanscape.io