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

타입스크립트에서는 하나의 함수가 매개변수의 개수나 타입에 따라 다르게 동작하도록 만들 수 있다. 이를 함수 오버로딩(Function Overloading) 이라고 한다.

C#이나 Java 같은 언어에서는 흔한 기능이지만, 자바스크립트는 원래 이를 지원하지 않는다. 하지만 타입스크립트에서는 오버로드 시그니처를 통해 이 기능을 흉내 낼 수 있다.

1. 함수 오버로딩의 구조

함수 오버로딩을 구현하려면 크게 두 단계가 필요하다.

오버로드 시그니처 (Overload Signature): 함수의 껍데기. 호출 가능한 버전을 정의한다.
구현 시그니처 (Implementation Signature): 함수의 알맹이. 실제 로직을 구현한다.

예시 시나리오

하나의 함수 func를 만드는데, 다음 두 가지 상황을 모두 처리하고 싶다고 가정해보자.

Ver 1 (매개변수 1개): 숫자를 하나 받으면 x 20 한 값을 출력.
Ver 2 (매개변수 3개): 숫자를 세 개 받으면 모두 더한 값을 출력.

2. 오버로드 시그니처 (선언부)

먼저 함수가 어떤 형태의 매개변수를 받을 수 있는지 선언만 해둔다. 구현부({}) 없이 작성한다.

// 버전 1: 매개변수 1개
function func(a: number): void;

// 버전 2: 매개변수 3개
function func(a: number, b: number, c: number): void;

이제 컴파일러는 func 함수가 인자를 1개 받거나, 3개 받는 경우만 허용한다는 것을 알게 된다.

3. 구현 시그니처 (구현부)

이제 실제로 함수가 어떻게 동작할지 코드를 작성해야 한다. 이때 중요한 점은 구현 시그니처의 매개변수는 위에서 정의한 모든 오버로드 시그니처를 커버할 수 있어야 한다는 것이다.

// 실제 구현부
function func(a: number, b?: number, c?: number) {
  if (typeof b === "number" && typeof c === "number") {
    // 매개변수가 3개 들어온 경우 (Ver 2)
    console.log(a + b + c);
  } else {
    // 매개변수가 1개 들어온 경우 (Ver 1)
    console.log(a * 20);
  }
}

💡 왜 b와 c가 선택적 매개변수(?)여야 할까? 첫 번째 오버로드 시그니처(func(a: number))는 b와 c를 받지 않는다. 따라서 구현부에서 b와 c를 필수값으로 정의하면 첫 번째 버전과 호환되지 않아 에러가 발생한다. 모든 버전을 포용하기 위해 유연하게 정의해야 한다.

4. 함수 호출 및 결과

이제 정의한 함수를 사용해보자.

func(1);        // ✅ 버전 1 호출 -> 20 출력
func(1, 2, 3);  // ✅ 버전 3 호출 -> 6 출력

// func(1, 2);  // ❌ 에러 발생!

func(1, 2)는 인자를 2개 넘겼다. 우리는 인자 1개짜리 버전과 3개짜리 버전만 만들었지, 2개짜리 오버로드 시그니처는 만들지 않았다. 따라서 타입스크립트는 이를 에러로 잡는다.

요약

함수 오버로딩: 매개변수의 형태에 따라 다르게 동작하는 함수를 만드는 문법.
오버로드 시그니처: 함수의 매개변수와 반환값 타입만 정의한 선언부. (여러 개 가능)
구현 시그니처: 실제 로직이 있는 부분. 모든 오버로드 시그니처와 호환되어야 하므로 매개변수 타입을 유연하게(Optional 등) 설정해야 한다.

Taemni's Blog