[TypeScript] 함수 - Call signature와 Overloading

들어가며

이번 포스팅은 타입스크립트 함수 파트를 정리한다.

Call signature과 overloading의 개념을 예시 code로 살펴보자.

 

 

---

Call signatures(호출 시그니처)

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

함수에 마우스를 올리면 해당 함수의 type을 보여준다.

예를 들어 React에서 함수로 props를 보낼 때, Call signature로 어떻게 함수가 작동할지 미리 설계 가능하다.

• 함수의 구현이 아니라 함수의 인수 및 반환 값의 유형
• JS로 컴파일되지 않음
• 여러 함수에 call signature 사용 가능

 

 

💡 함수 정의

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

 

 

💡 Call signature

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

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

 

Call sigature

 

type 리터럴로 함수 타입을 지정할 수도 있고, 인터페이스로 함수 타입을 지정해 줄 수 있다.

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

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

 

 

---

Overloading(오버로딩)

 Function(=Method) Overloading은 직접 작성할 일은 적고 외부 라이브러리에 자주 보이는 형태로, 동일한 이름에 매개 변수만 다른 여러 버전의 함수를 만드는 것을 함수의 Overloading이라고 한다.

• 함수에 여러 call signature가 있는 경우 함수 오버로딩이 필요
• function 키워드로만 함수 오버로딩을 할 수 있으며 arrow function으로는 오버로딩을 할 수 없다
• 추후에 살펴볼 다형성(polymorphism)을 이해하기 위해 꼭 알아야 함

 

💡 Error

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

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

without Overloading

 

 

💡 매개변수의 데이터 타입이 다른 경우

bad 예시, 매우 소수의 함수만 적용되지만 overload의 핵심을 보여준다.

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

 

 

💡 Nextjs에서의 예시

위 예시와 같은 함수는 거의 없지만 외부 라이브러리(ex. Nextjs) 사용 시에 활용될 수 있다.

Router.push("/home");

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

 

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

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

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

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

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

 

 

---

참고자료

https://nomadcoders.co/typescript-for-beginners