Frontend/TS

TS - Function Overloading

Creative_Lee 2022. 7. 15. 16:01

함수 오버로딩이란?

타입스크립트 에서는

여러 개의 Call signature를 갖는 함수를 하나의 이름으로 정의하는 것, 

 

여러 타입의 매개변수를 받지만

그에 의한 함수의 동작은 같아 하나의 함수 명으로 표현하고 싶을 때

사용할 수 있는 함수 정의 기술입니다.

 

* 객체 지향 프로그래밍의 특징 중 다형성( polymorphism ) 의 구현입니다.


call signature의 파라미터 수가 같을 때

type Add = {
  (a: number, b: number): number;
  (a: number, b: string): number;
};

const add: Add = (a, b) => {
  if (typeof b === "string") return a; 
  return a + b;
};

console.log(add(1,'문자열'))

위 코드에서 add 함수는 파라미터 수가 같은 2종류의 call signature를 가지고 있습니다.

때문에 add 함수 내부에서 타입이 number | string인 b에 대해 type 체크를 진행해서

각자 다른 값을 return 하도록 했습니다.

 


call signature의 파라미터 수가 다를 때

type Add = {
  (a: number, b: number): number;
  (a: number, b: number, c:number): number;
};

const add: Add = (a, b, c? :number)=> {
    if(c) return a + b + c
    return a + b
};

console.log(add(1,2)) // 3
console.log(add(1,2,3)) // 6

위 코드의 경우

위 코드에서 add 함수는 파라미터 수가 다른 2종류의 call signature를 가지고 있습니다.

때문에 type checker가 알수 있도록  '파라미터 c는 옵션이고 number일 수 있다' 라고 명시하였습니다.

 

 

 

 

 

 

 

'Frontend > TS' 카테고리의 다른 글

TS - Class  (0) 2022.07.18
TS - 제네릭(generic)  (0) 2022.07.15
TS - Call Signatures  (0) 2022.07.14
TS - 새로운 타입과 기본 문법  (0) 2022.07.14
TS - TypeScript란 ?  (0) 2022.07.14