[TypeScript] 함수 오버로딩

함수 오버로딩이란?

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

 

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

여러 개의 시그니처를 정의하여 함수가 다른 타입의 매개변수를 받을 수 있도록 합니다. 실제 구현은 하나만 존재하며, 타입에 따라 다른 동작을 수행합니다.

function add(a: number, b: number): number;
function add(a: string, b: string): string;
function add(a: any, b: any): any {
  return a + b;
}

console.log(add(1, 2)); // 3
console.log(add("hello ", "world")); // "hello world"

• add 함수는 숫자 두 개를 더하거나 문자열 두 개를 합칠 수 있다!
• 매개변수의 타입에 따라 동작이 달라진다!

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

매개변수의 개수가 다른 여러 개의 시그니처를 정의할 수 있습니다. 함수 구현에서는 매개변수가 선택적으로 사용될 수 있습니다.

function sum(a: number, b: number): number;
function sum(a: number, b: number, c: number): number;
function sum(a: number, b: number, c?: number): number {
  if (c !== undefined) {
    return a + b + c;
  } else {
    return a + b;
  }
}

console.log(sum(1, 2)); // 3
console.log(sum(1, 2, 3)); // 6

• sum 함수는 두 개 또는 세 개의 숫자를 더할 수 있다!
• 선택적 매개변수를 사용하여 함수 구현에서 조건을 처리

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

매개변수의 개수와 타입이 모두 다른 시그니처를 정의할 수 있습니다. 이를 통해 함수가 다양한 매개변수 조합을 처리할 수 있습니다.

function greet(name: string): string;
function greet(name: string, age: number): string;
function greet(name: any, age?: any): any {
  if (age !== undefined) {
    return `Hello, ${name}. You are ${age} years old.`;
  } else {
    return `Hello, ${name}!`;
  }
}

console.log(greet("rem")); // "Hello, rem!"
console.log(greet("rem", 20)); // "Hello, rem. You are 20 years old."

• greet 함수는 이름만을 받거나 이름과 나이를 모두 받을 수 있습니다.
• 함수 구현에서는 나이가 제공되었는지 여부에 따라 다른 메시지를 반환합니다.

오류 예시

함수 오버로딩을 사용할 때 시그니처와 실제 구현이 일치하지 않으면 오류가 발생할 수 있습니다. 

console.log(greet(20)); // 오류: 매개변수의 타입이 일치하지 않음

• greet 함수는 첫 번째 매개변수로 string 타입입니다. 따라서 number 타입의 매개변수를 전달하면 오류가 발생!!

또한, 매개변수의 개수가 맞지 않을 때도 오류가 발생할 수 있습니다

console.log(greet()); // 오류: 매개변수가 너무 적음

• greet 함수는 최소한 하나의 매개변수를 필요로 합니다. 매개변수를 전달하지 않으면 오류가 발생합니다.

 

Reference

https://ahnheejong.gitbook.io/ts-for-jsdev/03-basic-grammar/function

https://typescript-kr.github.io/pages/functions.html