[TS] - 함수 오버로딩(Overloading)

 

먼저 들어가기에 앞서, 

보통 아래와 같이 매개변수나 리턴타입을 Union타입을 이용하여 상황에 맞게 함수를 사용하였을 겁니다.

function coordinate(x: number | string, y: number | string): string | number {
  if (typeof x === "string" && typeof y === "string") {
    return x + y;
  } else {
    return Number(x) + Number(y);
  }
}

console.log(coordinate(1, 2));       // 3
console.log(coordinate("1", "2"));   // 12
console.log(coordinate(1, "2"));     // 3 (의도되지 않은 매개변수)
console.log(coordinate("1", 2));     // 3 (의도되지 않은 매개변수)

 

물론 타입을 잘 맞게 사용하면 되지만, 보통은 매개변수에 number면 number, string이면 string으로 구성된 매개변수를 사용할 텐데

Union타입이다보니 number 타입과 string타입을 같이 사용할 수 있는 의도치 않은 매개변수로 동작 할 수 있는 가능성이 존재합니다.

 

이럴때 필요한 방법이 오버로딩입니다.

 

오버로딩 (Overloading)

함수 이름은 같지만 매개변수 또는 리턴타입의 타입이 다른 함수를 말합니다. 호출할 수 있는 함수의 타입을 미리 여러 개를 만들어두는 기법입니다.

타입스크립트는 다른 언어와 다르게 선언부와 구현부로 나뉩니다.

 

선언부

가능한 매개변수 타입만 지정

구현부

모든 선언부를 표현할 수 있어야 한다.

function coordinate2(x: number, y: number): number;
function coordinate2(x: string, y: string): string;
function coordinate2(x: any, y: any): any {
  return x + y;
}

console.log(coordinate2(1, 2));
console.log(coordinate2("1", "2"));
console.log(coordinate2(1, "2"));   // 에러
console.log(coordinate2("1", 2));   // 에러

 

 

오버로딩을 사용할때 주의할 점이 있습니다.

타입스크립트는 함수에 오버로딩이 있을 때 위에서부터 순서대로 검사합니다.

function log(a: string): void;
function log(a: number): void;
function log(a: string | number): void {
  console.log(a);
}

function error(a: string | number) {
  log(a); // 에러 발생
}

error함수의 파라미터는 string | number 인데, log함수의 param은 string 이나 number여서 에러가 발생합니다.

 

애초에 오버로딩을할 필요가 없는데 오버로딩을 했다가 문제가 발생하는 경우를 봤는데,

Union타입을 활용할 수 있는 경우라면 먼저 Union타입을 사용 후 오버로딩을 사용하는 편이 좋습니다.