리액트에 defaultProps에 할당하는 객체에도 타입을 지정해야 한다??

⚠️ 내가 만났던 문제

개발을 하다보니 내가 작성했던 컴포넌트에 styled 를 지정하려고 했는데 오버로드 관련 에러를 만났다.

그러면 도대체 이런 에러가 왜 뜨는걸까?

함수의 오버로드란?

• '**함수 오버로드'**는 이름은 같지만 매개변수 타입과 반환 타입이 다른 여러 함수를 가질 수 있는것을 의미한다.
• 함수 오버로드를 통해 다양한 구조의 함수를 생성하고 관리할 수 있다.

예제

function add(a: string, b: string): string; // 함수 선언
function add(a: number, b: number): number; // 함수 선언
function add(a: any, b: any): any {
  // 함수 구현
  return a + b;
}

add('타입', '스크립트');
add(1, 2);
add('타입', 2);
// 이 호출과 일치하는 오버로드가 없습니다.
// 오버로드 1/2('(a: string, b: string): string')에서 다음 오류가 발생했습니다.
// 오버로드 2/2('(a: number, b: number): number')에서 다음 오류가 발생했습니다

예제에서 add 함수는 2개의 선언부와 1개의 구현부를 가지고 있다.

주의할 점은 함수 선언부와 구현부의 매개변수 개수가 같아야 한다.

함수 구현부에 any가 자주 사용된다.

📚 참고자료

• https://kentcdodds.com/blog/define-function-overload-types-with-type-script