[TS]04 call Signatures / overloading(오버로딩)

call Signatures

함수 위에 마우스를 올렸을때 보게되는것. 함수를 어떻게 호출해야하는지 알려준다.

인자(arguments)의 타입과 함수의 반환타입을 알려준다.

마우스를 올리면 콜 시그니쳐가 표시된다.

type Add = (a:number, b:number) => number; // -> Call Signatures 생성

const add:Add = (a, b) => a + b
const add:Add = (a, b) => {a + b} // 이런식으로 잘못 썼을경우 에러가 난다.

---

overloading 오버로딩

function overloading 이나 method overloading이라고도 불린다.

함수가 서로다른 여러개의 call signatures를 가지고 있을 때 발생시킨다.

패지나 라이브러리를 디자인할 때 많은 사람들이 사용한다.

 

예시1

//예시1 (Nextjs에서의 사용 예)

type Config = {
  path: string,
  state: object
}

type Push = {
  (path:string): void  //어쩔땐 이걸 보내주고 
  (config: Config): void // 또 어쩔땐 이걸 보내줄 수도 있다
}

const push:Push = (config) => { //config에 마우스를 올려보면 string | Config로 나온다. 타입체크를 해야한다.
  if(typeof config === 'string') {
    console.log(config) // 타입체크를 했기때문에 config에 마우스를 올리면 string으로 뜨는것을 알 수 있다.
    } else {
    console.log(config.path) // 여기선 config에 마우스올리면 Config타입의 오브젝트라는것을 확실히 알게된다.
  }
}

 

예시2

//예시2 (다른 개수의 파라미터를 가지게 된다면?)

type Add = { //서로 다른 콜시그니쳐가 있다.
  (a: number, b: number): number; // 첫번째 콜 시그니쳐는 파라미터가 2개
  (a: number, b: number, c: number): number; // 두번째 콜 시그니쳐는 파라미터가 3개인 상황
}

const add:Add = (a, b, c?:number) => { // 해결: c는 옵션같은 존재이므로 옵셔널을 붙여주고 타입을 알려준다.
  if(c) return a + b + c
  return a + b
}