안녕하세요!
오늘은 타입스크립트의 type과 interface의 차이점에 대해 말씀 드리려고 합니다.
저도 계속 TypeScript로 개발 해왔지만,
이 둘의 차이점에 대해서 깊게 생각해본적은 없었던 거 같네요.
그리고 또 하나의 결정적인 이유는
면접에서 이 질문이 들어왔을 때 어버버 했기 때문이죠..
함수의 parameter 특히 React에서 Props의 경우
습관적으로 다른 라이브러리들을 따라 interface를 사용해왔지만,
그 외에 경우에는 대부분 type이나 class를 더 선호했던 거 같아요.
그래서 이번 기회에 두 문법에 차이점에 대해 확실하게 정리해보려고 합니다!
type vs interface
이전에는 여러 블로그들에서 다른 분들이 나름의 이해를 갖고 정리했었고,
그 중에는 개인적인 의견도 조금씩 섞이면서 약간 개념이 싹 정리되지 않았는데
2021년에 타입스크립트 핸드북이 업데이트 되면서
시원하게 궁금증을 해결해줬네요!
Type alias는 선언 병합이 불가능하지만, interface는 가능합니다.
출처 : 타입스트립트 핸드북 type vs interface
급하시거나, 선언 병합 (Declaration Merging)에 대해 이미 알고 계시던 분들은
여기까지만 보셔도 됩니다!
그러나 시간이 조금 있고 궁금증이 많은 TypeScript 유저라면
선언 병합에 대해 저와 함께 조금 더 살펴보시죠!
선언병합(Declaration Merging) 이란?
같은 이름의 인터페이스를 정의할 경우 각 인터페이스가 가진 프로퍼티와 함수를 결합하는 기능
선언을 같은 이름으로 한다?
심지어 그 두 개가 합쳐진다고?
OOP라고는 C++ 밖에 접해본적 없는 저로서는 혼란스러울 수밖에 없었습니다.
근데! 타입스트립트에서는 가능하더라고여
또한 핸드북에 보면
이 개념을 이해한다면 기존의 JavaScript와 작업을 할 때 이점이 많아집니다. 또한 이 개념은 고급 추상화 개념으로의 문을 열어줄 것입니다.
라고 약간의 장려하는 듯한 뉘앙스를 취하기도 하네요.
어떤 문법인지 코드로 확인해보겠습니다!
핸드북의 예시를 가져왔는데요,
이런식으로 Mammal이라는 interface를 두 번 정의해서
언뜻 보면 덮어쓰여질 거 같지만
선언병합(Declaration Merging) 기능을 통해
자연스럽게 interface가 확장되는 결과를 보여주네요!
반면 type으로 해당 기능을 시도하면 어떻게 될까요??
빨간줄로 에러가 발생했습니다 ㅠ
type의 경우에는 선언병합이 되지 않는 것이죠.
그래서 TypeScript에서는
객체를 정의할 때 interface를 먼저 사용하고, 문제가 있을 경우 type을 사용하라.
라고 가이드하고 있나봐요!
하지만 저 기능이 어떻게 사용되는 것이 좋을 지는 저도 아직 경험해보지 못했고,
사실 아직까지 저는 필요한 프로퍼티는 자고로 클래스 안에 모두 들어있어야
마음이 편하네요... ㅠ
이런식으로 optional (프로퍼티에 ' ? ' 문자)로 표기해두면
하나의 interface로 같은 효과를 낼 수 있잖아요?
혹시 interface의 선언 병합 기능을 신박하게 활용할 수 있는 시나리오가 있다면
공유해주시면 좋을 거 같습니다.
그럼 오늘의 포스팅은 짧지만 여기서 마치도록 하겠습니다!
