함수 오버로드

나현·2023년 3월 23일

typescript

Typescript에서 살아남기

목록 보기

13/18

급변하는 기술 시장에서 살아남기 위해 Typescript 공부를 시작하였습니다...
과연 저는 살아남을 수 있을까요?!

👀 들어가기에 앞서...

이번에는 함수 오버로드에 대해 알아보도록 하겠습니다.

👀 함수 오버로드?

함수 오버로드는 하나의 함수에
여러 매개변수 타입을 설정할 수 있는 기능입니다.

어떤 상황에서 함수 오버로드를 써야 하는지
예제를 보면 좀 더 설명이 쉽습니다.
아래 예제는 함수에서 매개변수의 타입으로 유니온 타입이 설정되어 있습니다.

type numberOfString=number|string;

function add(a:numberOfString, b:numberOfString){
  if(typeof a==='string' || typeof b==='string'){
    return `${a}${b}`;
  }
  return a+b;
}

let result=add(2,3);

위 예제의 함수에서
타입스크립트는 result의 타입을 number가 아닌 numberOfstring으로 인식합니다.
이럴 경우 result를 가지고 연산하기 어려워집니다.
이 때 함수 오버로드 기능을 사용해 result를 숫자형으로 인식하도록 도와줄 수 있습니다.

👀 함수 오버로드 사용하기

방금 살펴 본 예제를 토대로,
함수 오버로드는 아래와 같이 사용할 수 있습니다.

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

이렇게 하면 매개변수 모두 숫자형일 경우 함수가 리턴한 결과도 타입스크립트가 숫자형으로 인식합니다.
위치는 아래와 같이 함수 위에 작성하고, 오버로드할 함수명과 같은 함수명을 작성해야 합니다.

type numberOfString=number|string;

// 함수 오버로드 부분
function add(a:number, b:number): number;
function add(a:string, b:string): string;
function add(a:numberOfString, b:numberOfString){
  if(typeof a==='string' || typeof b==='string'){
    return `${a}${b}`;
  }
  return a+b;
}

let result=add(2,3);