[TypeScript Error] No overload matches this call.

🤔 No overload matches this call.

기존 프로젝트 구조를 리액트 + styled-components를 사용하다가 TS + styled-components로 바꾸면서 오류가 발생하였다.

정확한 이유는 스타일드 컴포넌트에서 임의로 만든 props를 전달하려고 할때 발생하였다.

👀 overload란?

함수와 관련된 개념! 정확히 말하면 Function overloading.
동일한 이름의 함수에서 들어오는 매개변수의 type에 따라 다른 프로세스를 실행하는 것을 말한다. 다른 언어에서는 함수명만 같으면 되지만, TS에서는 각 함수의 매개변수의 개수도 같아야 함!

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

이렇게 정의된 걸 overloaded function이라고 하고,

plus('hello', 'typescript'); //hello typescript
plus(1, 2); //3

매개변수의 타입에 따라 결과를 출력하는 걸 확인할 수 있다.

• 그런데 여기서 a에는 string, b에는 number 데이터를 인자로 넣어주면

plus('high', 2); //Error: No overload matches this call.

두둥..! No overload matches this call 에러가 발생한다.

• 그러니까 정리하자면, overloaded function에서 지정한 매개변수들의 타입 형식(여기서는 [number, number] 또는 [string, string])과 실제 전달한 인자의 타입 형식이 일치하지 않으면 뜨는 에러이다.

🔥 How to fix ?

파일 형식을 js/jsx => ts/tsx로 바꾸고 넣고 싶은 속성에 interface를 넣어주면 쉽게 해결된다!

참고 링크