Function Overloading
다른 언어를 써 본 경험이 있다면 Overloading가 뭔지 알 것이다.
하지만 Javascript가 시작 언어고, 다른 언어를 전혀 써본 경험이 없다면 생소할 수 있는데, 쉽게 말해서 동일한 함수에 넘기는 Parameter로 실행 로직을 달리하는 방법이라고 보면 된다.
만약에 매개변수로 a b c라는 number를 넘겨받는 함수가 있다고 생각해보자.
이 함수의 기능은 a와 b만 입력된다면 덧셈을, a와 b와 c가 입력 된다면 곱셈을 처리하는 기능을 갖고 있다.
이를 Javascript로 처리한다면 아래와 같이 처리할 수 있다.
1
2
3
4
const numberLogic = (a, b, c) => {
if (!c) return a + b;
return a * b * c;
};
뭐… 문제는 없는데, a와 b와 c를 함수에게 어떻게 전달해야 하는지 메뉴얼이 부족하다.
Typescript에서는 Overloading을 통해 더욱 명시적으로 작성할 수 있다.
1
2
3
4
5
6
7
8
9
10
function numberLogic(a: number, b: number): number;
function numberLogic(a: number, b: number, c: number): number;
function numberLogic(a: any, b: any, c?: any): number {
if (!c) return a + b;
return a * b * c;
}
console.log(numberLogic(1, 2));
console.log(numberLogic(1, 2, 3));
console.log(numberLogic(1, 2, 'a')); // error
분명 함수의 구현부는 매개변수의 type을 any로 받고 있지만 매개변수에 문자열을 넘기면 에러가 난다.
구현부의 로직은 Overloading된 함수들의 요구사항을 충족하기 위한 개념일 뿐이고, Function Prototype의 요구 조건 중 하나를 충족해야만 실행이 가능하다.
Union Type
Overloading이라는 개념은 이제 알겠는데, 개인적으로는 좀 별로다.
일단 const a = () => 구조를 사용할 수 없다는 점이 첫번째, 유효한 Type을 선언하기 위해서 Prototype을 선언해야 한다는 것 자체가 솔직히 부담스럽다.
나같은 사람을 위해서 Typescript는 Type변화가 거의 없는 심플한 구조에 적용하기 좋은 연산자를 제공한다.
1
const len = (x: string | any[]): number => x.length;
배열 혹은 문자열이 와야하는 심플한 구조의 경우 | 연산자를 통해 쉽게 구현할 수 있다.