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

타입스크립트에서는 하나의 함수가 매개변수의 개수나 타입에 따라 다르게 동작하도록 만들 수 있다. 이를 함수 오버로딩(Function Overloading) 이라고 한다. C이나 Java 같은 언어에서는 흔한 기능이지만, 자바스크립트는 원래 이를 지원하지 않는다. 하지만 타입스크립트에서는 오버로드 시그니처를 통해 이 기능을 흉내 낼 수 있다. 1. 함수 오버로딩의 구조 함수 오버로딩을 구현하려면 크게 두 단계가 필요하다. 1. 오버로드 시그니처 (Overload Signature): 함수의 껍데기. 호출 가능한 버전을 정의한다. 2. 구현 시그니처 (Implementation Signature): 함수의 알맹이. 실제 로직을 구현한다. 예시 시나리오 하나의 함수 func를 만드는데, 다음 두 가지 상황을 모두 처리하고 싶다고 가정해보자. - Ver 1 (매개변수 1개): 숫자를 하나 받으면 x 20 한 값을 출력. - Ver 2 (매개변수 3개): 숫자를 세 개 받으면 모두 더한 값을 출력. --- 2. 오버로드 시그니처 (선언부) 먼저 함수가 어떤 형태의 매개변수를 받을 수 있는지 선언만 해둔다. 구현부({}) 없이 작성한다. TypeScript // 버전 1: 매개변수 1개 function func(a: number): void; // 버전 2: 매개변수 3개 function func(a: number, b: number, c: number): void; 이제 컴파일러는 func 함수가 인자를 1개 받거나, 3개 받는 경우만 허용한다는 것을 알게 된다. --- 3. 구현 시그니처 (구현부) 이제 실제로 함수가 어떻게 동작할지 코드를 작성해야 한다. 이때 중요한 점은 구현 시그니처의 매개변수는 위에서 정의한 모든 오버로드 시그니처를 커버할 수 있어야 한다는 것이다. TypeScript // 실제 구현부 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. 함수 호출 및 결과 이제 정의한 함수를 사용해보자. TypeScript func(1); // ✅ 버전 1 호출 -> 20 출력 func(1, 2, 3); // ✅ 버전 3 호출 -> 6 출력 // func(1, 2); // ❌ 에러 발생! func(1, 2)는 인자를 2개 넘겼다. 우리는 인자 1개짜리 버전과 3개짜리 버전만 만들었지, 2개짜리 오버로드 시그니처는 만들지 않았다. 따라서 타입스크립트는 이를 에러로 잡는다. --- 요약 1. 함수 오버로딩: 매개변수의 형태에 따라 다르게 동작하는 함수를 만드는 문법. 2. 오버로드 시그니처: 함수의 매개변수와 반환값 타입만 정의한 선언부. (여러 개 가능) 3. 구현 시그니처: 실제 로직이 있는 부분. 모든 오버로드 시그니처와 호환되어야 하므로 매개변수 타입을 유연하게(Optional 등) 설정해야 한다.