TypeScript와 stlyed-components를 같이 사용하는 과정 중에 에러가 발생했다.

(styled-component에 props를 전달하려고 할 때 생긴 문제이다.)

No overload matches this call.

overload ?

Function overloading으로 함수와 관련된 개념이다.

동일한 이름의 함수에서 들어오는 매개변수의 type에 따라 다른 프로세스를 실행하는 것을 말한다.

다른언어 ⇒ 함수명만 같으면 된다.

TypeScript ⇒ 각 함수의 매개변수의 개수도 같아야한다.

ex) overloaded function

function plusNumber(a: number, b: number): void;

function plusString(a: string, b: string): void;

function plus(a: any, b: any): void {
  if (typeof a === 'number') {
    return a + b;
  }
  if (typeof a === 'string') {
   return `${a} ${b}`;
  }
}

plus('study','TypeScript'); // study TypeScript
plus(2,3); // 5

plust('5','TypeScript'); // No overload matches this call.

overloaded function에서 지정한 매개변수들의 타입 형식과 실제 전달한 인자의 타입 형식이 일치하지 않으면 뜨는 에러이다.

해결

interface ButtonProps {
  element : string | number
}

const CalculatorButton = styled.button<ButtonProps>`
`