[TypeScript] 함수 오버로딩

함수 오버로딩

함수 오버로딩이란 typescript에서는 같은 이름을 가진 함수를 여러 개 정의할 수 있다.

각 함수는 서로 다른 타입을 가지는 매개변수로 정의해야 한다.

매개변수가 다르며 같은 이름을 가진 함수를 함수 오버로딩이라고 한다.

매개변수의 개수는 동일하고 타입이 다른경우

<script>
	// 함수 선언
function add(a: string, b: string): string;
function add(a: number, b: number): number;

// 함수 구현
function add(a: any, b: any): any {
  return a + b;
}

// 함수 호출
console.log(add(1, 2));
// 3
</script>

첫 번째 함수 선언은 문자열 타입인 두 매개변수 , 두 번째 함수 선언은 숫자형 타입인 두 매개변수를 가진다.

마지막 함수 구현 , 반환 타입은 위에서 선언한 두 개의 함수에 따라 문자열 또는 숫자형일 수 있으므로 any 타입으로 정의하며, 매개변수도 any 타입으로 정의한다.

매개변수의 개수는 다르고 타입이 동일한 경우

<script>
	// 함수 선언
function add(a: number): number;
function add(a: number, b: number): number;
function add(a: number, b: number, c: number): number;

// 함수 구현
function add(a: number, b?: number, c?: number): number {
  return a + (b ?? 0) + (c ?? 0);
}

// 함수 호출
console.log(add(1, 2, 3));
// 6
</script>

함수 선언의 두 번째와 세 번째는 있을수도 있고 없을 수도 있기 때문에 함수 구현에서 옵셔널체이닝 ? 를 사용했다. 또한 함수 구현에서 두 번째 매개변수와 세 번째 매개변수에 값을 전달하지 않으면, undefined로 할당된다. 그러므로 Null 병합 연산자( ?? )를 사용하여 null 또는 undefined인 경우 0을 반환하도록 한다.

매개변수의 개수와 타입이 다른경우

<script>
	// 함수 선언
function printConsole(a: number): void;
function printConsole(a: string): void;
function printConsole(a: number, b: string): void;
function printConsole(a: string, b: number): void;

// 함수 구현
function printConsole(a: any, b?: any): void {
  console.log(a, b);
}

// 함수 호출
printConsole('1');
printConsole('1', 2);
</script>

함수 구현에서 두 번째 매개변수는 옵셔널체이닝을 사용하고 , 전달되는 매개변수의 타입이 문자형 일수도 있고 숫자형 일수도 있기때문에 any 타입으로 정의한다.

함수 선언에서 a와 b가 모두 문자형이거나 숫자형인 경우는 없기때문에 아래 코드는 에러가 발생한다.

<script>
	printConsole(1 , 2); 에러
	printConsole('1', "2"); 에러
</script>