[TypeScript] 오버로딩(OverLoading) 이란?

 

TypeScript에서 오버로딩(OverLoading)은 같은 이름의 함수를 여러 번 정의하되, 매개변수의 타입, 개수, 반환값의 타입 등을 다르게 하여 구현하는 것을 말합니다.

 

즉, TypeScript에서 오버로딩을 사용하면, 함수를 호출할 때 전달되는 매개변수의 타입과 개수를 판단하여 해당 매개변수와 일치하는 시그니처를 가진 함수를 호출하게 됩니다.

 

 

다음은 TypeScript에서 오버로딩을 사용한 함수의 예시입니다.

 

function add(a: number, b: number): number;
function add(a: string, b: string): string;
function add(a: any, b: any): any {
  return a + b;
}

console.log(add(1, 2)); // 3
console.log(add("hello", "world")); // "helloworld"

 

예시에서 add 함수를 세 번 정의하였습니다.

 

첫 번째 시그니처는 number 타입의 매개변수 a와 b를 받아 number 타입의 값을 반환하도록 정의하였고,

두 번째 시그니처는 string 타입의 매개변수 a와 b를 받아 string 타입의 값을 반환하도록 정의하였습니다.

마지막으로, 실제 add 함수의 구현은 어떤 타입의 매개변수를 받더라도 a + b를 반환하도록 정의하였습니다.

 

add 함수를 호출할 때 TypeScript는 전달된 매개변수의 타입과 개수를 기반으로 위의 두 시그니처 중 적합한 시그니처를 판단하고, 해당 시그니처의 함수를 호출하게 됩니다.

 

 

728x90

 

---

 

그리고 시그니처의 매개변수 개수가 다르더라도 사용할 수 있습니다.

단, 추가로 옵셔널 프로퍼티(Optional Properties)를 사용해야 합니다.

 

type Add = {
  (a:number, b:number): number
  (a:number, b:number, c:number): number
}

const add:Add = (a, b, c?:number) => {
  if(c) return a + b - c
  return a + b;
}

console.log(add(1,2));  // 3
console.log(add(1,2,3)); // 0

 

첫 번째 시그니처는 number 타입의 매개변수 a와 b를 받아 number 타입의 값을 반환하도록 정의하였고,

두 번째 시그니처는 number 타입의 매개변수 a와 b와 c를 받아 number 타입의 값을 반환하도록 정의하였습니다.

 

실제 add 함수의 구현은 어떤 타입의 a와 b의 매개변수를 필수로 받고 c를 옵셔널 프로퍼티(Optional Properties)를 사용하여 선택적으로 받을 수 있도록 정의하였습니다.

기본적으로 함수는 a + b를 리턴하지만 if문을 사용하여 c가 존재할 시 a + b - c 를 리턴하도록 하였습니다.

 

이와 같은 방법으로 매개변수의 개수가 달라도 사용할 수 있습니다.