[TypeScript_study] 함수 오버로딩(Function Overloading)

* 함수 오버로딩이란?

TypeScript에서는 같은 이름을 가진 함수를 여러 개 정의할 수 있으며 각 함수는 서로 다른 타입을 가지는 매개변수로 정의해야 합니다. 매개변수가 다르며 이름이 동일한 함수를 함수 오버로딩이라고 합니다.

* 매개변수의 개수는 동일하지만, 타입이 다른 경우

interface User {
  name: string;
  age: number;
}

function join(name: string, age: number|string):User|string {
  if(typeof age === 'number') {
    return (
      name,
      age,
    );
  } else {
    return "type number";
    }
  }
  
  const kim:User = join("kim", 30);
  const park:User = join("park", "20");

join이라는 함수를 만들어놓았다. age의 경우 number 혹은 string type을 받아주고 return값으로 User typer과 string을 받아주고있다. 전달받은 매개변수인 age의 타입에 따라 결과값이 달라지고있다. 따라서 아래에 선언해준 kim, park이 error이 나게 된다.

 

이럴때 해결방법은 아래의 예시처럼 Overloading해주어야한다.

interface User {
  name: string;
  age: number;
}

function join(name: string, age: string): string;
function join(name: string, age:number): User;
function join(name: string, age: number|string):User|string {
  if(typeof age === 'number') {
    return (
      name,
      age,
    );
  } else {
    return "type number";
    }
  }
  
  const kim:User = join("kim", 30);
  const park:User = join("park", "20");

---

* 매개변수의 개수는 다르지만, 타입은 동일한 경우

// 함수 선언
function add(a: number): number;
function add(a: number, b: number): number;
function add(a: number, b?: number, c?: number): number;

// 함수 구현
function add(a: number, b?: number, c?: number): number {
  return a + (b ?? 0) + (c ?? 0);
}

// 함수 호출
console.log(add(1, 2, 3));
// 6

세 개의 함수 선언과 하나의 함수 구현이 존재합니다. 첫 번째 함수 선언은 한 개의 매개변수를 가지며 두 번째 함수 선언은 두 개, 세 번째 함수 선언은 세 개의 매개변수를 가집니다.

 

마지막 함수에는 함수의 본문을 구현하였으며, 두 번째 매개변수와 세 번째 매개변수는 선택적 프로퍼티(optional chaining)를 사용합니다. 함수 호출에서 두 번째 매개변수와 세 번째 매개변수에 값을 전달하지 않으면, undefined로 할당됩니다. 그러므로 Null 병합 연산자( ?? )를 사용하여 null 또는 undefined인 경우 0을 반환하도록 합니다.

---

* 매개변수의 개수와 타입이 다른 경우

// 함수 선언
function printConsole(a: number): void;
function printConsole(a: string): void;
function printConsole(a: number, b: string): void;
function printConsole(a: string, b: number): void;

// 함수 구현
function printConsole(a: any, b?: any): void {
  console.log(a, b);
}

// 함수 호출
printConsole('1');
printConsole('1', 2);

네 개의 함수 선언과 하나의 함수 구현이 존재합니다. 네 개의 함수 선언은 서로 다른 갯수와 타입의 매개변수를 가집니다.

 

마지막 함수에는 함수의 본문을 구현하였으며, 두 번째 매개변수는 선택적 프로퍼티를 사용합니다. 그리고 전달되는 값이 숫자형 또는 문자열일 수 있으므로 매개변수의 타입을 any 타입으로 정의합니다.

 

만약, 함수 호출에서 두 인자의 타입이 문자열인 경우 에러가 발생합니다.

네 개의 함수 선언에서 첫 번째 매개변수와 두 번째 매개변수가 문자열인 함수 선언문이 존재하지 않기 때문입니다.