[에러 해결] Type error: No overload matches this call.

에러 로그

Type error: No overload matches this call.
  Overload 1 of 3, '(plugin: Plugin<[], Root, string>, ...settings: [boolean] | []): Processor<Root, Root, Root, string>', gave the following error.
    Argument of type '(this: Processor<void, Root, Root, string>, ...settings: [(Options | undefined)?] | []) => void' is not assignable to parameter of type 'Plugin<[], Root, string>'.
      The 'this' types of each signature are incompatible.
        Type 'Processor<void, void, void, void>' is not assignable to type 'Processor<void, Root, Root, string>'.
          Type 'void' is not assignable to type 'Root'.
  Overload 2 of 3, '(tuple: [Plugin<any[], Root, Root>, ...any[]] | [Plugin<any[], Root, Root>, boolean]): Processor<Root, Root, Root, string>', gave the following error.
    Argument of type '(this: Processor<void, Root, Root, string>, ...settings: [(Options | undefined)?] | []) => void' is not assignable to parameter of type '[Plugin<any[], Root, Root>, ...any[]] | [Plugin<any[], Root, Root>, boolean]'.
  Overload 3 of 3, '(presetOrList: Preset | PluggableList): Processor<Root, Root, Root, string>', gave the following error.
    Argument of type '(this: Processor<void, Root, Root, string>, ...settings: [(Options | undefined)?] | []) => void' is not assignable to parameter of type 'Preset | PluggableList'.

해석) 이 함수 호출에 일치하는 오버로드가 없습니다.

에러 발생한 곳

  35 |  const matterResult = matter(fileContents);
  36 | 
> 37 |  const processedContent = await remark().use(html).process(matterResult.content);
     |                                              ^
  38 |  const contentHtml = processedContent.toString();
  39 | 
  40 |  const blogPostWithHTML: BlogPost & { contentHtml: string } = {

Next.js로 만들 블로그를 빌드하는 도중 에러가 발생했다.
에러가 발생한 곳은 remark-html 모듈의 html을 매개변수로 전달한 부분이다.

원인

Type error: No overload matches this call 에러는 함수에 들어오는 매개변수의 타입이 예상한 타입과 일치하지 않을 때 발생한다. 여기서 오버로드(overload)가 무슨 뜻일까?

오버로드(Overload)

: 같은 이름의 함수나 메소드가 서로 다른 매개변수를 가지는 여러 버전을 가질 수 있는 기능
오버로드를 사용하면 동일한 함수 이름을 사용하면서 다양한 매개변수 조합에 대해 다른 동작을 수행하도록 할 수 있다.

// 매개변수로 숫자 타입을 받는 add 함수의 오버로드
function add(x: number, y: number): number;

// 매개변수로 문자열 타입을 받는 add 함수의 오버로드
function add(x: string, y: string): string;

function add(x: number | string, y: number | string) {
  if (typeof x === 'number' && typeof y === 'number) {
    return a + b; // 숫자 타입인 경우 덧셈 수행
  }
 
  if (typeof x === 'string' && typeof y === 'string) {
    return `${x} ${y}`; // 문자열 타입인 경우 문자열 연결 수행
  }
}

add(1, 2); // 3
add('Hello', 'World'); // 'Hello World'
add(1, 'Hello'); // ❗️ Error: No overload matches this call.

오버로드가 무슨 뜻인지 알았으니 에러 로그를 다시 읽어보자.

1️⃣ Overload 1 of 3, '(plugin: Plugin<[], Root, string>, ...settings: [boolean] | []): Processor<Root, Root, Root, string>', gave the following error.
    Argument of type '(this: Processor<void, Root, Root, string>, ...settings: [(Options | undefined)?] | []) => void' is not assignable to parameter of type 'Plugin<[], Root, string>'.
      The 'this' types of each signature are incompatible.
        Type 'Processor<void, void, void, void>' is not assignable to type 'Processor<void, Root, Root, string>'.
          Type 'void' is not assignable to type 'Root'.
2️⃣ Overload 2 of 3, '(tuple: [Plugin<any[], Root, Root>, ...any[]] | [Plugin<any[], Root, Root>, boolean]): Processor<Root, Root, Root, string>', gave the following error.
    Argument of type '(this: Processor<void, Root, Root, string>, ...settings: [(Options | undefined)?] | []) => void' is not assignable to parameter of type '[Plugin<any[], Root, Root>, ...any[]] | [Plugin<any[], Root, Root>, boolean]'.
3️⃣ Overload 3 of 3, '(presetOrList: Preset | PluggableList): Processor<Root, Root, Root, string>', gave the following error.
    Argument of type '(this: Processor<void, Root, Root, string>, ...settings: [(Options | undefined)?] | []) => void' is not assignable to parameter of type 'Preset | PluggableList'.

1. Overload 1은 Plugin 타입과 boolean 타입을 인수로 받는 오버로드이며, Processor 타입을 반환하는데,
   이때 Processor 타입이 아닌 Plugin 타입을 반환해야 한다.
2. Overload 2 또한 Plugin 타입을 반환해야 하는데 Processor 타입을 반환하여 오류가 발생하고 있다.
3. Overload 3은 Preset | PluggableList 타입을 인수로 받고, Processor 타입을 반환하는데,
   이때 함수의 반환값의 타입이 Preset | PluggableList여야 한다.

해결 방법

따라서 이 오류를 해결하는 방법은 함수에 전달하는 매개변수의 타입을 일치시켜주면 된다.
나는 remark-html 모듈에서 불러온 html을 전달하는 부분에서 오류가 있어서 내가 직접 타입을 변경해줄 수는 없었다.
찾아보니 remark-html의 버전 15에서 타입과 관련된 이슈가 있다고 해, 버전을 14로 내려주어 해결할 수 있었다.
참고 : Typescript Error: "No overload matches this call." - Next.js Discussions