Interface VS Type / TypeScript

1.Why?

TypeScript로 프로젝트를 진행하는 중, interface와 type(정확히 말하면 type alias-타입 별칭-이지만 편의상 type으로 부르겠다)의 차이점에 대해서 의문이 생겼다.

 

함수의 매개변수를 선언할때는 type, props 객체를 선언할 때는 interface를 사용하는 중이였는데, 둘의 차이점을 대략적으로는 알고있었지만 정확하게는 모르고 사용하고 있었다. 그렇기에 이 기회에 둘의 차이점을 정리해보고, type과 interface를 언제 사용할지에 대해서 명확히 정의해보고자 한다.

---

 

2. Interface VS Type

공식문서 playground의 설명

둘 다 type을 설정해줄때 사용하고, 대부분의 경우에서 비슷하게 작동한다고 설명한다. 그럼 어떤 차이점이 있을까?

1. 객체로만 사용가능한 Interface

• Interface : Only 객체로만 사용가능
• Type : 유니온, 인터섹션 타입 등도 가능, 유니온 타입은 |(or)기호, 인터섹션 타입은 &(and)기호를 사용하는 타입

DatePickerMode가 유니온 타입이다.

2. 확장

기본적인 확장 방법

• Interface : extends를 통해 상속
• Type : &을 사용

Type 확장 예시

개인적으로는 interface의 확장방식이 더 직관적으로 보인다. extends를 통해 상속은 Java에서도 늘 보던거라 익숙한데 &을 통해 확장하는 방식은 뭔가 어색하달까...

 

이름이 동일할 경우

• Interface : 동일한 이름으로 여러 곳에서 선언할 수 있으며, 자동으로 병합됨
  
  • 따라서 public API를 사용하는 등 확장성이 필요한 경우 유용하다.
  • 하지만 원치 않는 병합이 이뤄질 수 있음
• Type : 확장이 불가능하며 같은 이름의 타입을 선언하면 에러 발생

3. 가시성

위의 차이점은 대략적으로 알고있었지만 이건 전혀 몰랐던 부분인데 VS Code 기준으로 마우스를 올렸을 때 type은 미리보기가 나오는데, interface는 안나온다! (intelli J에서도 동일하다고 한다)

짜잔

좌 : 주석 없음 / 우 : JsDoc로 주석 작성

 interface를 사용하지만 type처럼 내용을 보고싶다면 오른쪽처럼 Js Doc로 주석을 추가적으로 작성해야만 한다.

2024.09.02: 취업 후 macbook으로 작업중인데, mac에서는 interface도 내용이 보인다..!!

---

3. 어떻게 사용했는지

객체일 경우

• 컴포넌트의 props, api 객체의 type 등 객체는 모두 interface로 통일
• 원치않는 병합, 미리보기 지원 안됨 등의 단점이 있지만 객체일 경우 interface가 더 직관적

유니온, 인터섹션 타입

• interface내에 직접 선언하지 말고, 따로 type을 만들어서 사용
• 유지보수 및 재사용 측면에서 이득

사실 이 부분은 개인 취향에 따 팀원과 합의해서 쓰면 되지만 나는 이 방법이 깔끔해보인다.

---

4. 레퍼런스

 

https://www.typescriptlang.org/play#example/types-vs-interfaces

TS Playground - An online editor for exploring TypeScript and JavaScript

https://techblog.woowahan.com/9804/#toc-3

우리 팀의 우아한 타입스크립트 컨벤션 정하기 여정 | 우아한형제들 기술블로그

https://yceffort.kr/2021/03/typescript-interface-vs-type

타입스크립트 type과 interface의 공통점과 차이점