[타입스크립트] 오버로딩(overloading)이란?

오버로딩(overloading)이란?

• function overloading 또는 method overloading이라고 한다
• 오버로딩은 함수가 여러개의 call signatures를 가지고 있을때 발생된다
• 대부분의 경우 직접 오버로딩 함수를 작성할 일은 없다. 일반적으로 라이브러리 또는 패키지에서 오버로딩 함수가 있어 사용하는 경우가 더 많다

 

call signature vs overloading

call signature

type Add = (a: number, b: number) => number

overloading

함수가 여러개의 다른 call signatures를 가지고 있을때 발생된다

아래의 예제와 같이 사용하는 함수는 많이 없을테지만 오버로딩의 핵심을 보여준다

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

여기서 b의 타입은 number 또는 string이기 때문에 if문으로 케이스를 나누어 처리해준다

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

const add: Add = (a, b) => {
  if(typeof b === "string") return a
  return a + b
}

console.log(add(1, 2)) // 3
console.log(add(1, 'hello')) // 1

 

Nextjs에서 볼 수 있는 오버로딩 예제

일상에서 자주볼 수 있는 오버로딩 예제: Nextjs에서 router.push함수에 string 또는 object가 들어간다

router.push({
  pathname: '/post/[pid]',
  query: { pid: post.id }
})

Next.js에서 push 함수는 아래와 같이 오버로딩함수처럼 만들어졌을것이다

type Query = {
  pathname: string,
  query: object
}

type Push = {
  (pathname: string): void
  (query: Query): void
}

const push: Push = (query) => {
  if(typeof query === 'string') console.log(query)
  else {
    console.log(query.pathname, query.query)
  }
}

 

여러개의 arguments를 가지고 있는 overloading

일반 overloading

argument의 타입만 다르고 개수는 같다

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

여러개의 arguments를 가지고 있는 overloading

argument의 개수가 다르다

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
}