overloading이란?

• call signatures를 아래와 같이 길게 작성할 수 있는데 이런 방법이 존재하는 이유는 Overloading이 있기 때문.

• function overloading이나, method overloading 이라고도 부름

• overloading은 함수가 서로 다른 여러 call signatures를 가지고 있을때 발생시킴

예 1)
매우 소수의 함수만 이런식으로 할 수 있어서 아래 예시로는 활용되진 않지만 이해하기 위해..

예 2)
Nextjs에서 실제 개발상황에서 겪을 수 있는 오버로딩
(Nextjs 공부하쟌..)

• 일부 라이브러리에는 몇가지 함수가 있음
• 그 함수는 string을 보낼 수 있거나 configuration 객체 같은 객체를 보낼 수 있게 허용

type Config = {
    path : string,
    state : object
}
type Push =  {
    (path: string):void
    (config: Config):void
} 

const push:Push = (config) => {
    if(typeof config === "string"){
        console.log(config)
        }else {
        console.log(config.path)
        }
}

• 여기서 핵심은 string이나 Config 타입을 가지고 있다면 TS는 내부에서 그 타입을 체크하도록 해줌

다른 여러개의 인자를 가지고 있을 때 발생하는 효과

만약 두개의 call signature가 파라미터를 가지고 있는 각 갯수가 다를 경우가 있을 것이다.

만약 아래와 같이 하면 바~로 에러 발생

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

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

///에러남 : Type '(a: number, b: number, c: number) => number' is not assignable to type 'Add'. Target signature provides too few arguments. Expected 3 or more, but got 2.

• 다른 개수의 파라미터를 가지게 되면 나머지 파라미터도 타입을 지정해줘야함
• 현재 위에 코드에서c 파라미터는 옵션같은 것이기때문에 이 파라미터는 선택사항이라는 것을 알려줘야됨

아래와 같이 c 파라미터는 아마 number일 것이다를 알려주자

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


add(1, 2)
add(1, 2, 3)