Typescript에서 interface와 타입별칭으로 정의한 타입의 프리뷰가 다른이유.

Goal 

 - Typescript에서 interface와 타입별칭으로 타입을 정의한 변수의 프리뷰비교.

 - 프리뷰가 다른 이유 탐구.

 

Typescript에서는 타입을 선언하는 두 가지 방식이 있다.

타입별칭과 인터페이스인데, 타입별칭으로 선언한 객체의 타입의 경우는 프리뷰를 보여줄 때 해당 객체 프로퍼티의 타입들을 보여주는 반면 인터페이스는 그렇지 않다.

 

ex) 타입별칭

타입 별칭으로 선언한 변수에 커서를 올리면 프리뷰로 각 프로퍼티의 타입을 보여준다.

ex) 인터페이스

인터페이스로 타입을 정의한 변수의 경우 프리뷰 했을 때 해당 인터페이스의 타이틀을 보여준다.

 

인터페이스의 확장성으로 인해 업무시에 인터페이스로 타입을 선언하는 경우가 대부분인데, 다른 개발자분들이 선언한 인터페이스의 타입을 프리뷰로 볼때 프로퍼티의 타입들을 볼 수 없어서 불편한 적이 많았다.

 

근데 그렇게 하지 않는 이유가 궁금했고 검색해보았는데 다음과 같은 글이 있었다

( https://stackoverflow.com/questions/61851075/typescript-extending-interfaces-and-hover-hints ) 

 

답변을 간단히 요약하면 

프리뷰가 다른 것은 의도된 동작이며, 인터페이스의 경우 확장이 가능하기 때문에, 만약 HTMLELement같은 인터페이스를 상속하게 되면 프리뷰되는 프롭스가 많아져서 가독성을 해칠 수 있기 때문이라한다.

 

100% 정답일까 의구심이 들기도 하지만, 납득할 만한 답을 찾았기 때문에 궁금증을 해소할 수 있었다!