함수 오버로딩(Overloading)

1. 함수 오버로딩(Overloading)

Typescript에서는 다른 parameter, 다른 타입 등을 가진 동일한 이름의 함수를 정의할 수 있음.

export function add(a:string, b:string):string;
export function add(a:number, b:number): number;

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

add() 함수는 string 또는 number인 두 인자 a, b를 받고 다른 타입을 반환함. 함수 구현 부분에서 각 인자 a, b는 any 타입을 지정해주는데 일반적인 any가 아니라 string | number 타입의 값만 받을 수 있음. 한편, 이렇게 만든 함수를 다른 파일에서 사용하기 위해 export를 할 때, 오버로드 함수를 모두 export 해야 하기 때문에 구현된 함수에 default 키워드를 사용하면 안 됨.

 

 

A. 여러 타입이 가능할 때

하나의 인자에 여러 타입이 가능하다면 함수 구현부에 해당 인자의 타입으로 any를 지정 

export function add(a:string, b:string):string;
export function add(a:number, b:number): number;

// 1. a: string 또는 number
// 2. b: string 또는 number
// 3. 반환값: string 또는 number
export function add(a: any, b:any): any {
    return a + b;
}

 

 

B. optional parameter가 있을 때

특정한 인자가 optional이라면 함수 구현부에 해당 인자를 optional로 지정 

export function add(a:string, b:string):string;
export function add(a:number, b:number): number;
export function add(a:number, b?:number): number;

// b가 optional
export function add(a: any, b?:any): any {
    return a + (b ?? 0);
}

 

 

 

2. 예시

A. LocalStorage 파싱 결과값 처리하기

localStorage.getItem()의 결과값은 string | null이기 때문에 해당 함수를 사용하는 곳에서 null일 때의 처리를 따로 해줘야 하는 불편함이 있음. 따라서, 별도의 함수를 만들어 null일 때의 값을 처리할 수 있도록 아래와 같이 localStorageParser() 함수를 만들어 봄.

export function localStorageParser<T = unknown>(key: string, initialValue?: T): T | null {
   const data = localStorage.getItem(key);

   if (!isNullableItem(data)) {
      return JSON.parse(data);
   }
   if (initialValue) {
      return initialValue;
   }
   return null;
}

만약, 내가 initialValue 인수를 전달했다면 localStorageParser()는 항상 타입 T를 반환함에도 반환 타입이 T | null인 것은 부자연스러움. 하나의 함수에 대해 반환 타입이 2개 이상인 경우이므로 이 때 오버로드를 이용할 수 있음!

export function localStorageParser<T = unknown>(key: string, initialValue: T): T;
export function localStorageParser<T = unknown>(key: string): T | null;

export function localStorageParser(key: string, initialValue?: any): any {
  /* 함수 구현부 */
}

localStorageParser()를 사용할 때, initialValue 값을 전달한다면 반환 타입은 항상 T이고, 아니라면 T | null이 되므로 그에 따라 반환값을 처리할 수 있음.

 

 

 

3. 언제 오버로딩을 사용할까?

 

https://www.typescriptlang.org/docs/handbook/2/functions.html#writing-good-overloads

 

Always prefer parameters with union types instead of overloads when possible

 

 

 

 

 

[참고]

TypeScript - Function Overloading

[TypeScript]함수 오버로딩(Function Overloading)이란?