[TS] 함수 오버로딩

📌 함수 오버로딩

기본적인 구조는 같지만 매개변수가 다를 때 두 함수를 하나로 만들어줄 수 있다.

function add1(a: string, b: string): string {
  return a + b;
}

function add2(a: number, b: number): number {
  return a + b;
}

console.log(add1('hello', 'world')); //hello world
console.log(add2(1, 2)); //3

add1 함수와 add2 함수는 매개변수와 반환값의 타입이 다르다는 것 외에는 모두 동일하므로 이렇게 함수 2개를 개별적으로 작성하는 것은 비효율적

---

함수 오버로딩은

1. 타입 선언 부분
2. 함수 구현 부분

으로 나눠 작성한다.

//1. 타입 선언
function add(a: string, b: string): string;
function add(a: number, b: number): number;

//2. 함수 구현
function add(a: any, b: any): any {
  return a + b;
}

✴️ 예시

function saySomething(word: string): string {
  return word;
}

function saySomething(word: string[]): string {
  return word.join(' ');
}

위 두 함수는 구조가 비슷한데 매개변수가 문자열인지 배열인지의 차이만 있다. 이때도 하나의 함수로 구현할 수 있다.

1. 함수 오버로딩을 사용하지 않고 구현하는 방법

function saySomething(word: string | string[]): string {
  if (typeof word === 'string') {
    return word;
  } else if (Array.isArray(word)) {
    return word.join(' ');
  }
  throw new Error('unable to say something');
}

Array.isArray() 를 쓰는 이유 : typeof [] 하면 object 가 나오기 때문에 Array의 프로토타입 메소드를 사용해서 배열인지를 확인하는 방법을 사용해준다.

2. 함수 오버로딩 사용하는 방법

function saySomething(word: string) : string;
function saySomething(word: string[]) : string;
function saySomething(word: any) : any {
  if (typeof word === 'string') {
    return word;
  } else if (Array.isArray(word)) {
    return word.join(' ');
  }
  throw new Error('unable to say something');
}