TypeScript의 함수 오버로딩에 대한 빠른 가이드

우리는 앱에서 항상 함수를 사용하며 일반적으로 대부분의 JS 코드는 함수입니다. TypeScript는 이를 설명하는 다양한 방법을 제공합니다.
기본 함수의 경우 이 작업을 수행하기가 매우 쉽지만 함수가 다양한 인수 개수 및 유형을 사용하거나 호출 방식에 따라 다른 유형을 반환하는 경우에는 어떻게 해야 할까요?
이러한 경우 TypeScript에는 편리한function overloading 기능이 있습니다. 이를 사용하는 방법과 코드를 개선하는 데 어떻게 도움이 되는지 살펴보겠습니다.

함수 타이핑

지금 배가 고파서 음식을 요리하는 함수를 만들어 봅시다.

function cookDish(ingredient: string): string {
  return `${ingredient}🍴 is ready, bon appétit!`;
}

단일string 인수를 재료로 전달했으며 호출 후 string 요리를 반환합니다.

cookDish('🥚'); // '🍳🍴 is ready, bon appétit!'

하지만 잠깐, 이것으로는 충분하지 않습니다. 여기에 샌드위치가 꼭 필요합니다!
요리하려면 여러 재료를 사용할 수 있도록 함수를 수정해야 합니다.

function cookDish(ingredient: string | string[]): string {
  const tableSet = '🍴 is ready, bon appétit!';
  if (typeof ingredient === 'string') {
    return `${ingredient}${tableSet}`;
  } else if (Array.isArray(ingredient)) {
    return `${ingredient.join('')}${tableSet}`
  }
  throw new Error('Nothing to cook 😭');
}

함수 인수를 설명하기 위해 Union 유형을 사용했습니다. 이는 하나string 또는 여러 개string[]일 수 있습니다.

cookDish('🌽'); // '🍿🍴 is ready, bon appétit!';
cookDish(['🍞', '🍅', '🥓']); // '🥪🍴 is ready, bon appétit!';

다양한 인수를 지원하기 위해 유형을 추가하는 것은 대부분의 경우 일반적이고 좋은 접근 방식이지만 때로는 함수를 호출하는 모든 방법을 명시적으로 정의해야 합니다. 이것은 함수 오버로딩이 작용하는 곳입니다.

함수 오버로딩

다소 복잡한 함수의 경우 사용성 및 가독성을 향상시키기 위해 항상 함수 오버로딩 기능을 사용하여 사용성 및 가독성을 향상시키는 것이 좋습니다. 이 접근 방식은 가장 유연하고 투명한 것으로 간주됩니다.

이를 사용하려면 몇 가지 함수 서명을 작성해야 합니다.

오버로드 서명 - 함수를 호출하는 다양한 방법(인수 및 반환 유형)을 정의하며 본문이 없습니다. 여러 오버로드 서명(일반적으로 2개 이상)이 있을 수 있습니다.

구현 서명 - 함수에 대한 구현을 제공합니다: 함수 본문. 구현 서명은 하나만 있을 수 있으며 오버로드 서명과 호환되어야 합니다.

함수 오버로딩을 사용하여 cookDish를 다시 작성해 보겠습니다.

// Overload signature
function cookDish(ingredient: string): string
function cookDish(ingredients: string[]): string

// Implementation signature
function cookDish(ingredient: any): string {
  const tableSet = '🍴 is ready, bon appétit!';
  if (typeof ingredient === 'string') {
    return `${ingredient}${tableSet}`;
  } else if (Array.isArray(ingredient)) {
    return `${ingredient.join('')}${tableSet}`
  }
  throw new Error('Nothing to cook 😭');
}

두 개의 오버로드 서명은 string 또는 string[] 인수를 사용하여 함수를 호출할 수 있는 두 가지 방법을 설명합니다. 두 가지 방법 모두 결과적으로 요리된string 요리를 얻게 됩니다.
구현 서명은 함수 본문 내에서 함수의 동작을 정의합니다.
함수 호출은 변경되지 않지만 이전과 같이 요리할 수 있습니다.

cookDish('🍚'); // '🍙🍴 is ready, bon appétit!';
cookDish(['🫓', '🍅', '🥑']); // '🥙🍴 is ready, bon appétit!';

const money: any = 100;
cookDish(money);
/**
⛔ No overload matches this call.
Overload 1 of 2, '(ingredient: string): string', gave the following error.
  Argument of type 'any' is not assignable to parameter of type 'string'.
Overload 2 of 2, '(ingredients: string[]): string', gave the following error.
  Argument of type 'any' is not assignable to parameter of type 'string[]'.
*/

위의 마지막 예에서 참고하세요: 구현 서명이 우리의 기능을 구현하는 것이지만 돈은 요리를 할 수 없습니다. any를 인수function cookDish(ingredient: any)로 받아들이더라도 직접 호출할 수 없습니다. 오버로드 서명만 호출할 수 있습니다.

저녁 식사 시간입니다! 약간 더 복잡한 예를 살펴보겠습니다.

function cookDinner(dish: string): string
function cookDinner(money: number): string // Wrong argument type
/**
⛔ This overload signature is not compatible with its implementation signature.
*/
function cookDinner(dish: string, drink: string, dessert: string): string
function cookDinner(dish: string, drink?: string, dessert?: string): string {
  let dinner = `${dish}🍴`
  if (drink && dessert) {
    dinner += ` ${drink}🧊${dessert}🥄`
  }
  return `${dinner} is ready, bon appétit!`
}

cookDinner('🍝'); // '🍝🍴 is ready, bon appétit!';
cookDinner('🍔', '🥤', '🍰'); // '🍔🍴🥤🧊🍰🥄 is ready, bon appétit!';

cookDinner('🍺', '🍸') // 🤒 Invalid number of arguments
/**
⛔ No overload expects 2 arguments, but overloads do exist that expect either 1 or 3 arguments.
*/

구현 서명은 오버로드와 호환되어야 하며 직접 호출할 수 없음을 기억해야 합니다.

결론

함수 오버로딩은 함수를 보다 우아하게 입력할 수 있는 강력한 TypeScript 기능입니다.

더 읽기:

Function Overloads

Function overloading Do's and Don'ts

Arrow functions overload

이 가이드를 즐기셨기를 바라며 계속 지켜봐 주시기 바랍니다.