TS012. 타입스크립트 함수 오버로딩

함수 오버로딩

• 타입스크립트를 통해 함수 오버로딩을 정의할 수 있다.
• 사실 자바스크립트에서는 여러 케이스의 인자를 넣어도 되는 함수가 있을 때, 어떠한 파라미터를 넣어도 정적 분석 때 에러가 발생하지 않기 때문에 인자를 잘못 전달하는 일이 비일비재하다.
• 타입스크립트 오버로딩을 통해 이를 막을 수 있다.

오버로딩 적용 전

/**
 * 파라미터를 1개만 받는다면, 그냥 반환한다.
 * 파라미터를 3개 받는다면, 전부 더해서 반환한다.
 */
function sumOrJustReturn(p1: number, p2?: number, p3?: number) {
  if (p2 && p3) {
    return p1 + p2 + p3;
  }

  return p1;
}

console.log(sumOrJustReturn(10, 10, 10));
console.log(sumOrJustReturn(10, 20)); // 정상, 에러가 나지 않는다 그런데 이건 의도하지 않은 케이스라 아예 빨간줄 뜨게 해서 에러로 막고 싶다.
console.log(sumOrJustReturn(10));

오버로딩 적용 후

• 아래 코드에서 구현 내용이 없는 function 과 같이 함수 시그니처 오버로딩을 하면, 오버로딩된 시그니처에 맞는 케이스만 타입스크립트에서 정상 케이스로 처리한다.
• 자바스크립트에서는 이 시그니처들은 삭제된다.
• 오버로딩함으로써, 1개 혹은 3개의 파라미터만 받도록 강제할 수 있다.
• 그런데 웬만하면 오버로딩을 사용하지 않고, 각각의 시그니처를 따로 만들어서 사용하는 것이 유지보수에 편리하다.
• 구현과 호환되지 않는 오버로딩은 타입스크립트에서 구현과 호환되지 않는다는 메세지를 보여주며 에러처리한다.

function sumOrJustReturn2(only: number): number;
function sumOrJustReturn2(p1: number, p2: number, p3: number): number;
// function sumOrJustReturn2(p1: string): string; // 에러 (구현 시그니처와 오버로드 시그니처가 호환되지 않는다.)

function sumOrJustReturn2(p1: number, p2?: number, p3?: number) {
  if (p2 && p3) {
    return p1 + p2 + p3;
  }

  return p1;
}

console.log(sumOrJustReturn2(10, 10, 10));
console.log(sumOrJustReturn2(10, 20)); // 에러가 남, 오버로딩 중 맞는 시그니처가 없음
console.log(sumOrJustReturn2(10));