[TypeScript] 함수 오버로딩

ttining·2025년 4월 3일

📌 함수 오버로딩이란?

  • 하나의 함수를 매개변수의 개수나 타입에 따라 여러가지 버전으로 정의하는 방법을 말한다.
  • JavaScript에서는 지원되지 않고, 오직 TypeScript에서만 지원된다.

✅ C언어 예시 (오버로딩 불가능)

C언어에서는 함수 오버로딩을 직접 지원하지 않는다.
동일한 이름의 함수를 여러 번 정의하면 컴파일 오류가 발생한다.

// 매개변수 없음
void func() {
    printf("매개변수 없음\n");
}

// 매개변수가 한 개 (C에서는 함수 오버로딩을 지원하지 않으므로 오류 발생)
// void func(int a) {
//     printf("%d\n", a + 20);
// }

int main() {
    func();
    // func(10); // 오류 발생
    return 0;
}

✅ TypeScript에서 함수 오버로딩 구현

TypeScript에서 함수 오버로딩을 구현하려면,
여러 개의 오버로드 시그니처를 선언한 후, 실제 구현부를 작성해야 한다.

📍 예제 설명

  • 함수 이름 : func
  • 모든 매개변수의 타입 : number
  • ver1. 매개변수가 1개 : 매개변수에 20을 곱한 값 출력
  • ver2. 매개변수가 3개 : 매개변수 전부를 더한 값 출력
// * 오버로드 시그니처 (함수의 호출 가능 형태 정의)
function func(a: number): void;
function func(a: number, b: number, c: number): void;

// * 구현 시그니처 (실제 함수 구현)
function func(a: number, b?: number, c?: number) {
  if (typeof b === "number" && typeof c === "number") {
    console.log(a + b + c);
  } else {
    console.log(a * 20);
  }
}

func(); // ❌ 오류 발생 (오버로드 시그니처에 해당하는 형태가 없음)
func(1); // ✅ 정상 실행 → 20 출력
func(1, 2); // ❌ 오류 발생 (정의된 시그니처 없음)
func(1, 2, 3); // ✅ 정상 실행 → 6 출력

📌 오버로드 시그니처의 존재 의미

오버로드 시그니처는 호출 가능한 함수 형태를 제한하는 역할을 한다.
만약 구현 시그니처에서 모든 매개변수를 필수로 받는다면, 특정 오버로드 시그니처가 무의미해진다.

function func(a: number): void; // ❌ 오류 발생
function func(a: number, b: number, c: number): void;

function func(a: number, b: number, c: number) {
  if (typeof b === "number" && typeof c === "number") {
    console.log(a + b + c);
  } else {
    console.log(a * 20);
  }
}
  • 위 코드에서는 첫 번째 오버로드 시그니처가 func(a: number) 형태를 정의하고 있지만,
    실제 구현부에서 bc를 필수로 받기 때문에 첫 번째 오버로드 시그니처가 의미를 잃어버린다.
  • 이 경우 TypeScript는 "오버로드 시그니처가 구현 시그니처와 호환되지 않는다"는 오류를 발생시킨다.

📌 선택적 매개변수와 오버로딩의 관계

모든 오버로드 시그니처가 의미를 가지도록 만들려면 선택적 매개변수를 활용하는 것이 좋다.

function func(a: number): void;
function func(a: number, b: number, c: number): void;

// 선택적 매개변수를 사용하여 오버로드 유지
function func(a: number, b?: number, c?: number) {
  if (typeof b === "number" && typeof c === "number") {
    console.log(a + b + c);
  } else {
    console.log(a * 20);
  }
}
  • func(1), func(1, 2, 3) 모두 정상적으로 동작한다.

💡 하지만, 모든 매개변수를 선택적으로 정의하면 오버로딩 없이도 동일한 기능을 구현할 수 있다.
따라서 함수의 다양한 호출 방식을 명확히 정의할 필요가 있을 때 오버로딩을 활용하는 것이 좋다.

profile
내가 보려고 만든 벨로그 *'-'*

0개의 댓글