TypeScript - 함수 오버로딩

오버로딩

동일한 이름에 매개 변수만 다른 여러 함수를 만드는 것을 함수의 오버로딩이라고 한다.

바로 예제로 정리해보자

---

 

예제 1

add 라는 이름의 함수에 하나는 string, 하나는 number이다. 

function add(a: any, b: any): any 를 통해 오버라이딩 해보자.

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

add("hello", "world");
add(1, 1);

마우스 호버 시 +1 오버로딩을 확인할 수 있다.

 

만약 오버로딩되지 않은 값을 넣는다면?

 

오류를 뱉어준다.

 

 

예제 2

 

날짜를 만드는 Date 객체를 만드는 두가지를 오버로딩 하려한다.

 

1. timestamp를 통해 하나의 인자 전달

2. m,d,y 월 일 연도를 받아 3개의 인자를 전달하는 방식.

 

if (d !== undefined && y !== undefined) 를 통해 1번인지 2번인지를 판단해 준다.

만약 1번이라면 timestamp의 값이 들어가며, 조건에 충족하여 d 와 y를 입력받은 경우

new Date(y, mOrTimestamp, d); 를 통해 1번 함수로 m (월)을 넣어주고, 2번 함수로 y,d(년도, 일) 을 넣어준다. 

function makeDate(timestamp: number): Date;
function makeDate(m: number, d: number, y: number): Date;
function makeDate(mOrTimestamp: number, d?: number, y?: number): Date {
  if (d !== undefined && y !== undefined) {
    return new Date(y, mOrTimestamp, d);
  } else {
    return new Date(mOrTimestamp);
  }
}
const d1 = makeDate(12345678);
const d2 = makeDate(5, 5, 5);
const d3 = makeDate(1, 3);

 

그러나 마지막 d3의 경우 인자가 두개이므로 

 

오류 퉤~

 

오류와 함께 다른 오버로드를 안내해준다.

 

 

참고 : https://www.typescriptlang.org/docs/handbook/2/functions.html

Documentation - More on Functions