[TypeScript] 타입스크립트 Call Signatures와 오버로딩 알아보기!

TypeScript

Call Signatures

Call Signatures은 함수의 매개변수와 반환 값의 타입을 모두 type으로 미리 선언하는 것을 말합니다.
그리고 이것으로 React에서 함수로 props를 보낼 때, 어떻게 작동할지 미리 설계도 가능합니다.
이러한 방식은 프로그램을 짜기 전에 타입을 먼저 생각하고 코드를 구현하는 방식에서 많이 쓰이며,
따라서 개발자가 미리 타입을 인지하고 코드를 작성 할 수 있다는 장점이 있습니다.

type Add = (a:number, b:number) => number // Call Signatures

const add : Add = (a, b) => a + b

오버로딩 (Overloading)

function overloading, method overloading이라고도 불리며,
동일한 이름에 매개 변수와 매개 변수 타입 또는 리턴 타입이 다른 여러 버전의 함수를 만드는 것을 말합니다.
이러한 예시의 함수는 거의 없지만 쉽게 이해하기 위해 예시를 들어보면 다음과 같습니다.

매개 변수의 타입이 다른 경우

type Plus = {
  (a:number, b:number) : number
  (a:number, b:string) : number
  // 매개 변수 b가 number가 올 수도 있고, string이 올 수도 있는 경우
}
const plus : Plus = (a, b) => {
  if (typeof b === 'string') return a
  return a+b
}

매개 변수의 수가 다른 경우

type Sum = {
  (a:number, b:number) : number
  (a:number, b:number, c:number) : number
}
const sum : Sum = (a, b, c?:number) => {
  if(c) return a + b + c
  return a + b
}
// 이때 c는 옵션이 되기 때문에 Optinal Type으로 지정

기타

이러한 오버로딩은 간혹 외부 라이브러리에서 사용이 되기도 합니다.
예를 들어 라우터의 push가 대충 두 가지 방법으로 페이지를 이동한다고 할 때 다음과 같이 사용 할 수 있습니다.

router.push("/home");

router.push({
    path: "/home",
    state: 1
});

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

// 오버로딩
type Push = {
    (config: Config): void,
    (config: string): void
}

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

참고

노마드 코더
typescript-More on Functions