Interface VS Type / TypeScript
1.Why?
TypeScript로 프로젝트를 진행하는 중, interface와 type(정확히 말하면 type alias-타입 별칭-이지만 편의상 type으로 부르겠다)의 차이점에 대해서 의문이 생겼다.
함수의 매개변수를 선언할때는 type, props 객체를 선언할 때는 interface를 사용하는 중이였는데, 둘의 차이점을 대략적으로는 알고있었지만 정확하게는 모르고 사용하고 있었다. 그렇기에 이 기회에 둘의 차이점을 정리해보고, type과 interface를 언제 사용할지에 대해서 명확히 정의해보고자 한다.
2. Interface VS Type
둘 다 type을 설정해줄때 사용하고, 대부분의 경우에서 비슷하게 작동한다고 설명한다. 그럼 어떤 차이점이 있을까?
1. 객체로만 사용가능한 Interface
- Interface : Only 객체로만 사용가능
- Type : 유니온, 인터섹션 타입 등도 가능, 유니온 타입은 |(or)기호, 인터섹션 타입은 &(and)기호를 사용하는 타입
2. 확장
기본적인 확장 방법
- Interface : extends를 통해 상속
- Type : &을 사용
개인적으로는 interface의 확장방식이 더 직관적으로 보인다. extends를 통해 상속은 Java에서도 늘 보던거라 익숙한데 &을 통해 확장하는 방식은 뭔가 어색하달까...
이름이 동일할 경우
- Interface : 동일한 이름으로 여러 곳에서 선언할 수 있으며, 자동으로 병합됨
- 따라서 public API를 사용하는 등 확장성이 필요한 경우 유용하다.
- 하지만 원치 않는 병합이 이뤄질 수 있음
- Type : 확장이 불가능하며 같은 이름의 타입을 선언하면 에러 발생
3. 가시성
위의 차이점은 대략적으로 알고있었지만 이건 전혀 몰랐던 부분인데 VS Code 기준으로 마우스를 올렸을 때 type은 미리보기가 나오는데, interface는 안나온다! (intelli J에서도 동일하다고 한다)
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
https://techblog.woowahan.com/9804/#toc-3
https://yceffort.kr/2021/03/typescript-interface-vs-type