Function Overloadings

Introduction to TypeScript function overloadings

타입스크립트에서 function overloading으로 parameter의 type과 result 값의 type관계를 설정할 수 있음.

c#이나 자바 같은 정적 타입의 function overloading과 다름

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

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

위 예제에서

• addNumber() 함수는 2개의 number를 더해서 리턴해줌
• addString() 함수는 2개의 string을 붙여서 리턴해줌

아래처럼 1union type`을 사용할 수도 있음.

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;
}

근데 union type은 parameter의 type과 result의 관계를 잘 표현못함.
add() 함수가 컴파일러한테 number 혹은 string을 받아서 number나 string을 리턴하라고 해주는데 parameter가 전부 number일때 number를 리턴하고 parameter가 전부 string일때 string을 리턴하는거를 표현못함.
아래 코드는 에러가 안나오고 undefinde로 나옴.

console.log(addunion(1, '1'));

따라서 타입스크립트는 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;
}

첫 overload는 컴파일러 한테 인자들이 number면 number를 리턴하라고 하고, 두 번째 overload는 인자들이 string이면 string을 리턴하라고함.
각각의 functino overload가 add()함수가 지원하는 type의 조합을 정의해줌.

이제add()함수를 부르면 코드 에디터가 overload funnction이 있다는 것을 알려줌.

Function overloading with optional parameters

함수를 overload할 때 overload한 함수들이 필요한 parameter수는 같아야함. 만약에 overload한 함수중의 하나가 다른 overload한 함수들 보다 parameter의 개수가 더 많으면 개수만큼 optional한 parameter로 만들어주면됨.
아래가 그 예시임.

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;
}

sum()은 2개 혹은 3개의 number를 받음. 세번째 parameter는 옵션임.

Method overloading

함수가 class의 property 일때 medhod라고함. 타입스크립트는 medhod overloading도 지원함.
예를 들어서 count()함수 인자의 개수에 따라서 nubmer 혹은 배열을 리턴할 수 있음.

class Counter {
    private current: number = 0;
    count(): number;
    count(target: number): number[];
	// 인자가 없을수도 있고 하나 있을 수도 있으니까 optional parameter로 넣어줘야함.
    count(target?: number): number | number[] {
        if (target) {
            let values = [];
            for (let start = this.current; start <= target; start++) {
                values.push(start);
            }
            this.current = target;
            return values;
        }
      	// 인자가 들어오지 않았을 때 count()가 리턴하는 것
        return ++this.current;
    }
}

아래처럼 했을때

let counter = new Counter();

console.log(counter.count()); // return a number
console.log(counter.count(20)); // return an array

다음과 같이 결과가 나옴.

1
[
   1,  2,  3,  4,  5,  6,  7,
   8,  9, 10, 11, 12, 13, 14,
  15, 16, 17, 18, 19, 20     
]

• 타입스크립트의 function overloading은 parameter type과 함수의 result간의 관계를 조정하게 해줌

출처