[Typescript] Call Signatures, Overloading

콜 시그니쳐 (Call Signatures)

Call Signature란 함수의 매개변수와 반환 값의 타입을 모두 type으로 미리 선언하는 것이다.

따라서 해당 함수의 파라미터와 리턴의 타입을 미리 지정할 수 있고,
React에서 함수로 props를 보낼 때 어떻게 작동할지 미리 설계가 가능하다.

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

// call signatures가 적용된 add 
type Add = (a:number, b:number) => number

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

오버로딩 (Overloading)

오버로딩은 함수가 여러개의 call signatures나 파라미터의 개수가 다를 경우를 가지고 있을 때 발생한다.

패키지나 라이브러리 또는 Next.js(객체형)에서 오버로딩을 많이 사용한다고 하니 오버로딩의 형태를 공부해보자.

• 여러개의 Call Signatures를 가지고 있을 경우

type Add1 = {
  (a:number, b:number)
  (a:number, b:string)
}


const add1: Add1 = (a, b) => a + b // error 
// 이 경우, b가 string or number 여서 더할 수 없다.

따라서 ->
      
const add1: Add1 = (a, b) => {
  if(typeof b === 'string') return a
  return a + b
}
// if문으로 분기를 나눠주면 OK.

• 객체 형태인 여러개의 Call Signatures를 보낼 경우

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, config.state)}
}
// config의 타입이 string일 경우 아무것도 리턴하지 않고 (void),
// Config 타입일 경우 config.path, config.state를 리턴

• 파라미터의 개수가 다른 경우

type Add2 = {
  (a:number, b:number): number,
  (a:number, b:number, c:number): number
}
// 하단 c는 기본형이 아닌 선택사항이므로 (optional한 형태) 
// 다른 개수의(c) 파라미터를 가지게 되면, 나머지 파라미터의 타입을 다시 언급해 지정해주어야 한다.

						  // 물음표와 함께 추가적으로 type 지정
						  // 이 파라미터는 선택사항임을 알려줌.
const add2: Add2 = (a, b, c?:number) => {
  if (c) return a + b + c
  return a + b
}

add3 (1, 2)
add3 (1, 2, 3)
// 오류 없이 클린