logo

JEONGGON

    블로그
github
mode
목 차
down-arrow

TypeScript 오버로딩

2024.02.18.

post-thumbnail

오버로딩

1. 오버로딩(overloading)

  • function overloading, method overloading으로도 불림
  • 프로젝트에서 이용하는 외부 패키지, 라이브러리에서 오버로딩을 매우 많이 사용함
  • 함수가 서로 다른 여러 개의 호출 시그니쳐를 가지고 있을 경우, 발생시킴
type Add = {
  (a: number, b: number): number
  (a: number, b: string): number
}

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

// a는 number, b는 number 또는 string일 수 있음
// 따라서 a + b에서 에러 발생


// 에러를 벗어나는 방법
// b의 타입에 따라서 분기처리
const add: Add = (a, b) => {
  if (typeof b === "string") {
    return a;
  }
  return a + b;
}


1-1. Next.js 라우팅에서 오버로딩

// Next.js에서 라우팅하는 예시에서 오버로딩 필요한 예시

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

Router.push("/home")

// Router에 path와 state가 다 들어오거나(object), path만(string) 들어오는 경우, 타입 지정하기


//-----------------------------------------------------

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

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

// path는 string, state는 있을 수도 있고, 있으면, object 타입

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

1-2. parameter의 개수가 다른 경우 오버로딩

// 호출 시그니쳐가 가지는 파라미터의 개수가 다름

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


// c 파라미터는 optional type
const add: Add = (a, b, c?: number) => {
  if (c) {
    return a + b + c;
  } else {
    return a + b;
  }
};
typescriptprogrammingoverloading
profile

조정곤

주니어 프론트엔드 개발자

github
linkedin
instagram
email

< 이전글

Next.js Suspense

다음글 >

TypeScript 제네릭

Typescript 포스트 (15)

down-arrow