[Typescript] call signatures // overloading

 

call signatures 

 

call signatures는 우리가 작성한 함수에 마우스를 올려놓으면 나오는 것을 말한다. 

이것은 우리가 함수를 어떻게 호출해야하는 지 알려준다. 

즉 인자의 타입이랑 return의 타입을 알려주는 것이다. 

 

 

 

 

자 그럼 우리만의 call signature를 어떻게 선언할 것인지 알아보자.

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


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

이렇게 해놓으면 우리가 처음 함수를 만들 때 처럼 일일히 type을 지정해줄 필요가 없다.

이런식으로  type Add만 만들고 함수 옆에 적어준뒤 마우스를 올리면 어떤 type인지 다 알려준다. 

 

overloading

 

 

 

Function(=Method) Overloading은 직접 작성하기보다 외부 라이브러리에 자주 보이는 형태로, 하나의 함수가 복수의 Call Signature를 가질 때 발생한다

 

overloading은 여러 call signatures가 있는 함수이다. 

 

 

 

type Add = {
  (a: number, b: number): number;  //마지막 number은 return이 number로 된다는 뜻이다.
  (a: number, b: string): number;
};

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

add(1, "2");

 

만약 if 절이 없다면 아래와 같은 에러가 뜬다.

 

 

이제 일상에서 개발을 할 때 볼 수 있는 오버로딩을 보자

 

next.js에서 실제로 사용하는 예이다. 

 

Router.push("/home")

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

path는 string이고 state는 number이다. 

next.js에서는 string으로 보낼 수도 있고, object로도 보낼 수 있다. 

 

여기에 타입스크립트를 적용해보자

 

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


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


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

 

다시 add 함수로 돌아가보자

 

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

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


console.log(addFunc(1, 2, 3));
console.log(addFunc(1, 2));

 

여기서는 꼭  c? :number을 지정해줘야한다. 그렇지 않으면 에러가 뜬다.

또한 type AddType을 만들때도 

a: ~ b: ~ c:~ 까지 다 타입을 넣어주지 않고  a: ~ , b:~ 만 있다면  매개변수에 c를 설정하고 인수 세번째 인자를 넣으면 역시 에러가 뜬다.

따라서 꼭 인자를 3개 넣을라면 type도 3개를 지정해줘야한다. 

 

vscode 오류해결

 

https://vlogue.tistory.com/101