안녕하세요!

이번시간에는 타입스크립트에서 제공하는 함수 오버로딩(overloading)에 대해 알아보도록 하겠습니다!

함수 오버로딩(function overloading)이란??

코드 살펴보기!

만약 문자열을 합치는 함수하고 숫자를 더하는 함수를 만들고 싶다고 가정해보고 간단한 코드를 만들어보겠습니다!

function addNumber(a:number,b:number):number {
    return a+b
}

function addString(a:string, b:string):string {
    return a+b
}


console.log(addNumber(4,5)) // -> 9
console.log(addString('신','승훈')) // -> 신승훈

// type error 발생
console.log(addNumber(4,'훈'))
console.log(addString('신',11))

아래와 같이 짜긴했는데 코드가 좀 비효율적인것 같죠? 좀 더 간결하게 짜볼게요!

// 타입가드를 사용
// 받은 인자가 숫자면 더하고
// 문자형이면 문자열 합치기
function add(a: number | string, b: number | string): number | string {
    if (typeof a === 'number' && typeof b === 'number')
        return a + b;

    if (typeof a === 'string' && typeof b === 'string')
        return a + b;
}

console.log(add(1,3)) // -> 4
console.log(add('신','승훈')) // -> 신승훈


console.log(add('신',123)) // -> undefined

위에 보다 훨씬 깔끔해진거같네요!! 근데 이것을 함수 오버로딩(function overloading) 을 이용하면 훨씬 더 갈끔하게 짤 수 있습니다!

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,4)) // -> 5
console.log(add('신승','훈')) // -> 신승훈

바로 이렇게 함수 오버로딩을 사용하면 더욱 더 간결한 코드를 짤 수 있습니다

오버로딩을 함으로써 인자가 number형이면 return을 number로

문자형이면 string을 반환하도록 설정 한 것이죠!

추가적으로 인자를 optional로 주게되면 더욱 더 유연하게 코드를 짤 수 있습니다

function sum(a: number, b: number): number;
function sum(a: number, b: number, c: number): number;
function sum(a: number, b: number, c?: number): number {
    if (c) return a + b + c;
    return a + b;
}

위와 같이 메인함수의 파라미터를 optional로 지정하게되면 오버로딩하는 함수에서는 그 파라미터를 넣어도되고 안넣어도 되기 때문에 조금 더 유연한 프로그래밍이 가능해지는 것 같습니다!!

이상 타입스크립트에서 함수형 오버로딩을 알아봤습니다

감사합니다.