Typescript: interface로 함수타입 선언해보기

type으로 함수 타입을 선언하는 것은 익숙하다.

하지만 interface로 함수타입을 선언하는 것은 낫설뿐만 아니라 이해하기 어렵다.

React.FunctionComponent의 선언부를 이해하려고 노력해 보는 중에 이런 차이를 알게 되었다.

여기서 react hook에서 함수콤포넌트를 정의할때와 다른 형태의 interface라 이것을 어떻게 이해해야 할지 막막했는데, interface를 이용한 함수타입 선언에서 힌트를 얻게 되었다.

즉, propTypes, contextTypes, defaultProps, displayName 은 기본적으로 optional이라 선언할 필요가 없다면, interface 함수타입 선언과 동일한 형태가 된다.

추가적으로 propTypes 를 정의하고 싶다면, Div.propTypes = {...} 이런 식으로 소스에 덧붙이면 된다.