[TS]Call Signatures 콜 시그니처란?

Call Signatures

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

//Add타입을 만든다.
type Add = (a:number, b:number) => number;

//함수의 타입을 설명해 주고 코드를 구현할 수 있다.
//a와 b에 타입을 써주지 않아도 TS가 알고 있다. Add타입에 프로퍼티 타입이 정의되어 있음.
const add:Add = (a,b) => a+b

//add함수는 'void를 반환하지 않는다'는 오류 메세지가 뜬다.(number타입을 반환으로 받아야 함.)
const add:Add = (a,b) => { a + b }  //void는 아무것도 리턴하지 않는다.

//원래는 각각 타입을 작성해 줘야 했지만, 이 과정을 위처럼 분리해서 구현할 수 있다.
const add:Add = (a:number,b:number) => a+b;

a 와 b에 마우스를 올려보면 (parameter) b:number 라는 메세지를 볼 수 있다.

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

이 부분이 Call Signature이다.

(a:number, b:number)를 props로 함수를 보내게 되면, TS한테 어떻게 함수가 작동하는지 설명해줘야한다.

 

정리하자면,

프로퍼티로 호출 가능한 것을 설명하려면 객체 타입에 Call Signature을 작성할 수 있다.

Call Signatures는 다음과 같이 함수의 매개 변수(parameter)와 반환 타입을 지정한다.

type RemonFunction = {
remon: string;
(args: number): boolean;
};

function hello(fn: RemonFunction) {
console.log(fn.remon, fn(6));
}

 

여러 개의 함수에 같은 콜 시그니처 사용 가능

콜 시그니처는 함수의 매개변수의 타입과 반환 타입을 정의하는 것으로, 함수의 구조적인 형태를 설명합니다.

만약 여러 함수가 같은 매개변수 타입과 반환 타입을 공유한다면, 같은 콜 시그니처를 사용해 이를 표현할 수 있습니다.

 

예를 들어, 다음과 같이 동일한 콜 시그니처를 여러 함수에서 사용할 수 있습니다:

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

const add: Operation = (a, b) => a + b;
const multiply: Operation = (a, b) => a * b;
const subtract: Operation = (a, b) => a - b;

여기서 Operation이라는 콜 시그니처는 두 개의 숫자 인자를 받아서 숫자를 반환하는 함수입니다.

이 콜 시그니처를 add, multiply, subtract 같은 여러 함수에서 사용할 수 있습니다.

 

 

요약

1. 화살표 함수에서 {}를 생략하면 return이 생략된 것이다.
2. 즉 a + b 와 { return a+b } 는 같은 뜻이다.
3. { a+b }라고 하면 아무것도 리턴하지 않기 때문에 에러가 난다. (void)

 

👉 즉, 이 방법을 사용하면 ReactJs에서 proptypes을 사용하지 않아도 된다.