FunctionComponent 인터페이스 관련 질문입니다

interface FunctionComponent<P = {}> {

    (props: P, context?: any): ReactElement<any, any> | null;

    // 함수의 추가속성

    propTypes?: WeakValidationMap<P> | undefined;

    contextTypes?: ValidationMap<any> | undefined;

    defaultProps?: Partial<P> | undefined;

    displayName?: string | undefined;

}

이 부분에서 첫 번째 줄을 함수형 컴포넌트의 모습을 타이핑한 것으로 배웠는데 아래 속성같은 경우는 함수형 컴포넌트 자체의 속성(프로퍼티)을 타이핑한 것 같다고 유추를 할 수 있었습니다.

그런데 타입스크립트가 interface만 보고도 자동으로 함수의 시그니처와 함수 자체의 프로퍼티를 따로 분리해서 추론을 해주는 건가요?

이부분의 작동 원리가 궁금합니다.

예를 들면

const WordRelay:FunctionComponent = () => { 
   return jsx코드
}

이 부분에서 FunctionComponent로 타이핑하였을 때, WordRelay를 왜 타입 부분의 첫 번째로 타이핑한 건지, 아래의 propsTypes, contextTypes 등의 속성으로는 추론하지 않은 이유가 타입스크립트 내부 동작방식에 의해서인지가 궁금합니다.

추가적으로 이 방법이 인터페이스를 사용하여 좀 더 복잡한 함수를 타이핑할 수 있는 방법이라고 생각해도 될까요? (보통 함수에 프로퍼티를 추가할 일이 없어서 이런 타이핑 방식을 보니 헷갈리네요ㅠㅠ)