(TypeScript) - 함수 타입 표현식과 호출 시그니처

■ 함수 타입 표현식

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

 

다음과 같이 함수도 화살표 함수 방식으로 타입 별칭 설정이 가능하다.

 

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

 

이렇게 정의된 함수 타입은 함수 선언식에 직접 타입 지정해주지 않아도 타입만으로 깔끔하게 코드 작성이 가능하다.

 

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

const add: Operation = (a, b) => a + b;
const sub: Operation = (a, b) => a - b;

 

함수 표현식을 사용하면 좋은 점은 원래라면 함수 타입에 대한 정의가 일일이 필요했으나,

함수 타입을 Operation 정의했기 때문에 중복되는 함수 타입 정의를 줄일 수 있다.

 

const add: Operation = (a, b,c) => a + b; // 오류 발생!

 

만약 함수 타입의 매개변수와 실제 매개변수 개수와 타입이 맞지 않으면 오류가 발생한다.

여기서도 Operation 매개변수는 2개인데 3개로 받아버리니 오류가 발생한다. 

 

■ 호출 시그니쳐 (콜 시그니쳐)

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

const add2: Operation2 = (a, b) => a + b;
const sub2: Operation2 = (a, b) => a - b;
const multiply2: Operation2 = (a, b) => a * b;
const divide2: Operation2 = (a, b) => a / b;

 

호출 시그니처는 {} 안에 소괄호로 각 매개변수 타입과 반환값을 정해준다.

 

function func(a: number): void {
    
}

 

근데 이 {} 안에 들어가는 것이 우리가 일반적인 함수 정의했을 때 타입 정의를 한

(a: number): void 부분이 그대로 들어가는 듯한 모습이 보인다.

 

이것을 호출 시그니처라고 한다.

함수 타입 표현식과 동일한 역할을 한다.

 

함수 타입을 할 때 마치 객체처럼 {} 로 만드는 이유는 사실 자바스크립트 함수도 객체이기 때문이다.

• 하이브리드 타입

type Operation2 = {
    (a: number, b: number): number;
    name: string
};

 

호출 시그니처 이용할 때에는 객체의 프로퍼티를 추가로 생성할 수 있다.

왜냐하면 함수도 객체이기 때문이다.

 

type Operation2 = {
    (a: number, b: number): number;
    name: string;
};

add2(5,8);
add2.name;

 

이렇게 하면 함수처럼 호출도 되고 점표기법으로 마치 객체 사용하듯이 사용도 가능하다.

이런 타입을 하이브리드 타입이라고 한다.