overloading

Function(=Method) Overloading은 직접 작성하기보다 외부 라이브러리에 자주 보이는 형태로, 하나의 함수가 서로 다른 여러 개의 Call Signature를 가질 때 발생한다.

1. overloading 종류

1) 매개변수의 개수는 동일하지만, 타입이 다른 경우

// 함수 선언
type Add = {
	(a: string, b: string) : string;
    (a: number, b: number) : number;
};

// 함수 구현
const add: Add = (a, b) => {
  return a + b;
}

// 함수 호출
console.log(add(1, 2)); // 3

2) 매개변수의 개수는 다르지만, 타입은 동일한 경우

// 함수 선언
type Add = {
	(a: number): number
    (a: number, b: number): number
    (a: number, b?: number, c?: number): number
}

// 함수 구현
const add: Add = (a, b?:number, c?:number) => {
  return a + (b?? 0) + (c?? 0);
}


// 함수 호출
console.log(add(1, 2, 3)); // 6

옵셔널 타입에는 뒤에 ?와 타입을 함께 표기해 주어야 한다.

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

// 함수 선언
type PrintConsole = {
	(a: number): void
    (a: string): void
    (a: number, b: string): void
    (a: string, b: number): void
};

// 함수 구현
const printConsole: PrintConsole = (a, b?) => {
  console.log(a, b);
}

// 함수 호출
printConsole('1');
printConsole('1', 2);

2. overloading 사용

1) any 사용

함수를 구현하면서 사용하는 매개변수 옆에 하나씩 : any를 적어준다.

2) 로직 검사

if else 구문을 사용해 로직 안에서 타입을 검사한다.
(NextJS에서 overloading 예시 참고)

3. NextJS에서 overloading 예시

NextJS에서 페이지를 바꿀 때 overloading을 사용할 수 있다.

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)
  }
}