함수 오버로딩

기본 함수

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

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

addStrings('Hello ', 'world.'); // Hello world.
addNumbers(2, 3); // 5

엄격하게 함수를 선언하면 string 끼리만 더하는 함수와 number 끼리만 더하는 함수를 따로 만들 수 있다. 반면 자바스크립트는

function add(a, b) {
  return a + b;
}

이렇게만 작성해도 add함수만으로 string, number를 모두 더하도록 할 수 있다.

오버로딩

function add(a: string | number, b: string | number): string;
function add(a: number, b: number): number;
function add(a: string | number, b: string | number) {
  // 함수 구현
  if (
    typeof a === 'string' || //
    typeof b === 'string'
  ) {
    return `${a}${b}`;
  } else {
    return a + b;
  }
}

console.log(add('Hello ', 'world.')); // Hello world.
console.log(add(1, 2)); // 3
console.log(add('HELLO ', 255705)); // HELLO 255705

이런 식으로 짜면 자바스크립트의 함수와 같은 역할을 할 수 있다. 하지만 유니온 타입과 타입가드를 통해 더 짧게 코드를 짤 수 있다.

function add(a: number | string, b: number | string): string | number {
  return typeof a === 'string' || //
    typeof b === 'string'
    ? `${a}${b}` 
	: a + b;
}
// a, b 중 하나라도 string인 경우 템플릿 리터럴을 활용해 문자열로 결합
// 둘 다 stiring이 아니라면 (number라면) 더하기