function overloading

1. 개요

동일한 이름의 함수를 여러 개의 서로 다른 매개변수 타입이나 개수로 정의하는 것.
비슷한 기능을 수행하는 함수라면, 동일한 이름을 사용할 수 있도록 하는 것이 유지보수성 및 가독성 향상에 도움을 주기 때문에 function overloading을 사용한다.

2. 필요한 이유

다음과 같은 코드가 있다.

function add(a: number | string, b: number | string) {
  if (typeof a === "string" || typeof b === "string") {
    return a.toString() + b.toString();
  } else {
    return a + b;
  }
}

add 함수의 반환 타입은 string | number로 추론되기 때문에, add 함수의 결과 값에 사용할 수 있는 내장 메서드는 toString(), toLocaleString(), valueOf()로 제한된다.
string과 number형에 모두 사용할 수 있는 내장 메서드이기 때문이다.

add(1, 2);  // string | number
add(1, 2) as number;  // number

위와 같이 반환 타입이 number임이 명백한 경우에도 TypeScript는 반환 타입을 number | string으로 추론하기 때문에 추가적인 형 변환을 거쳐야된다는 불편함이 있다.

이러한 문제점을 해결하기 위한 방안으로 function overloading을 이용할 수 있다.

function add(a: string, b: string): string;
function add(a: number, b: number): number;
function add(a: number | string, b: number | string) {
  if (typeof a === "string" || typeof b === "string") {
    return a.toString() + b.toString();
  } else {
    return a + b;
  }
}
 
add(1, 2);  // number
add("1", "2");  // string
add(1, "2");  // No overload matches this call.

3. type guard와의 차이점

type guard는 조건을 통해 타입을 구체적으로 좁히기 위해 사용하며,
function overloading은 다양한 타입의 인자를 통한 함수의 polymorphism(다형성)을 위해 사용한다.