Jin's Study

[TypeScript] Call signatures, Overloading 본문

Front-end/TypeScript

[TypeScript] Call signatures, Overloading

PolarJin 2023. 12. 30. 17:41

Call Signatres & Overloading

🔎 Call signatures:

함수의 형식을 정의하는 데 사용함.
함수의 타입을 명시하고 함수에 전달할 수 있는 매개변수의 타입과 반환 타입을 지정해야하는데 활용
  • 함수 위에 마우스를 올렸을 때 보게 되는 것. 함수를 어떻게 호출해야하는 지 알려주며, 함수의 반환 타입도 알려줌.
  • 함수를 구현하기 전에 함수가 어떻게 작동하는 지 서술해둘 수 있음
type Add = (a:number, b:number)=>number; //call signature

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

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

→이 경우에 오류가 발생하는데, 그 이유는 {}를 사용하면{a+b}가 단일표현식이 아니기 때문에 이 부분에서 return a+b; 명시적으로 값을 반환하도록 수정해야한다.

 

🔎 Overloading:

하나의 함수에 대해 여러 시그니처를 제공하여 다양한 형태의 매겨변수나 반환값을 처리할 수 있도록 기능
  • function overloading이나 method overloading이라고 부른다.
  • 우리가 앞으로 대부분 외부 라이브러리를 사용하게 될 텐데 외부 라이브러리는 오버로딩을 많이 사용함. 앞서 callsignatures방식을 다르게 표현하자면...
  • 오버로딩은 함수가 서로 다른 여러개의 call signatures를 가지고 있을때 발생시킨다.
type Add = {
	(a:number, b:number):number
}
const add: Add = (a,b)=> a+b


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
}
function combine(a: number, b: number): number; // 시그니처 1
function combine(a: string, b: string): string; // 시그니처 2

// 실제 구현 부분
function combine(a: number | string, b: number | string): number | string {
  if (typeof a === 'number' && typeof b === 'number') {
    return a + b;
  } else if (typeof a === 'string' && typeof b === 'string') {
    return a + b;
  }
  // 만약 다른 경우에 대한 처리가 필요하다면 여기에 추가 가능
}

// 예시 사용
const result1: number = combine(1, 2);           // 반환 타입: number
const result2: string = combine("Hello", " World");  // 반환 타입: string