TypeScript의 함수 오버로딩

때로는 반환 값의 타입이 전달된 매개변수에 따라 달라지는 함수를 만나게 됩니다. 이를 위해 TypeScript에서는 함수의 오버로딩을 사용합니다. 이는 함수의 다양한 시그니처 변형을 지정할 수 있게 해줍니다.

예제를 통해 살펴보겠습니다. 문자열의 문자들을 글자 배열로 분리하는 함수가 있다고 가정해 봅시다:

function splitStr(str: string): string[] {
	return str.split('');
}

또한, 숫자의 자릿수를 숫자 배열로 분리하는 함수도 있다고 가정합니다:

function splitNum(num: number): number[] {
	let str: string = String(num);
	let arr: string[] = str.split('');
	
	return arr.map(elem => +elem);
}

이제 두 함수를 하나로 합쳐보겠습니다. 새로운 함수는 매개변수의 타입에 따라 숫자 배열이나 문자열 배열을 반환해야 합니다.

함수의 다양한 시그니처를 선언하기 위해 오버로딩을 사용합니다:

function splitVal(val: number): number[];
function splitVal(val: string): string[] {
	// 두 시그니처의 구현
}

이제 함수의 구현을 작성해 보겠습니다. 코드 내에서 어떤 함수 시그니처가 활성화되었는지 조건문으로 확인하고, 그에 따라 적절한 코드를 실행하여 해당 타입의 결과를 반환해야 합니다:

function splitVal(val: number): number[];
function splitVal(val: string): string[] {
	if (typeof val === 'string') {
		return val.split('');
	} else {
		let str: string = String(val);
		let arr: string[] = str.split('');
		
		return arr.map((elem: string): number => +elem);
	}
}

다른 언어와 달리, TypeScript에서는 오버로딩 시 하나의 함수가 생성됩니다. 동일한 이름이지만 서로 다른 시그니처를 가진 여러 함수를 만드는 것은 불가능합니다.

DOM 요소의 텍스트를 반환하거나 변경하는 함수를 작성하세요. 이 함수는 다음과 같이 동작해야 합니다:

text('#elem', 'text'); // 텍스트를 설정함
text('#elem');         // 현재 텍스트를 반환함