[ TypeScript ] 타입 스크립트의 Call Signatures 과 Overloading.

 

 

✅ Call Signatures

//Call Signature

type Add = (a: number, b: number) => number;

const add: Add = (a, b) => a + b

 

Call(=Functions)Signature 란 함수의 매개변수와 반환 값의 타입을 모두 type으로 미리 선언하는 것.

* React 에서 함수로 props를 보낼 때, 어떻게 작동할지 미리 설계 가능.

* Type Alias 와 같은거 아닌가? Alias 는 type Name = string의 형태, call signature는 함수의 인자, 리턴 타입의 형태이다.

 

 

✅ Overloading

//overloading

=> 매개변수의 데이터 타입이 다른 경우 예외 처리

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;
}

=> 매개변수의 수가 다른 경우 예외 처리

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

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

위와 같은 함수는 거의 없지만 외부 라이브러리에서 활용될 수 있다고 한다.

 

//overloading in Next.js

router.push("/home");

router.push({
path: "/home",
state: 1
});

=> 예를 들어, Next.js의 라우터 push가 대충 두 가지 방법으로 페이지를 이동한다고 할 때,

type Config = {
path: string,
state: number
}

type Push = {
(config: Config): void,
(config: string): void
}

const push: Push = (config) => {
if (typeof config === "string") console.log(config);
else console.log(config.path);
}

=> 패키지나 라이브러리는 위와 같이 두 가지 경우의 Overloading으로 디자인되어 있을 것이다

 

Overloading 은 한마디로, 

파라미터만 달라지고, 비슷한 로직이 반복되는 경우에 사용할 수 있으며
코드의 중복을 줄이고 재사용성을 높이기 위해 사용하는 것 같다.