[TS] 함수 타입 표현식과 호출 시그니처

함수 타입 표현식

타입별칭을 이용해 함수의 타입을 별도로 정의하는 문법을 함수 타입 표현식이라고 한다.

[TS] 타입 별칭과 인덱스 시그니처

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

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

Operation 타입을 정의하고, 이를 add 함수의 타입으로 지정했다. add 함수의 매개변수 타입을 Operation에서 이미 정의되었으므로 생략 가능하다.

이렇게 같은 타입의 함수를 여러 개 만들 때 타입 별칭을 사용하면 코드 중복을 줄일 수 있다.

 

다만, 함수 타입 표현식이 타입 별칭과 함께 사용되어야 하는 것은 아니다. 아래와 같이 사용해도 문제 없다.

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

하지만 타입이 길어지면 가독성이 떨어지므로, 타입 별칭을 사용하는 것이 권장된다.

 

호출 시그니처

호출 시그니처(Call Signature)는 함수 타입 표현식과 동일하게 함수의 타입을 별도로 정의하는 방식이다.

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;

함수 타입 표현식과 다른 점은 객체 형태로 정의하고, => 대신 :을 사용한다.

자바스크립트에서는 함수도 객체이기 때문에 위 코드처럼 객체를 정의하듯 함수의 타입을 별도로 정의할 수 있다.

 

호출 시그니처의 장점은 함수 타입에 프로퍼티를 추가로 정의할 수 있다는 점이다.

이렇게 정의하면 add2함수는 호출 가능하면서 동시에 name 프로퍼티를 가진 객체가 된다.
이는 함수이자 일반 객체를 의미하는 타입으로 정의되며 하이브리드 타입이라고 부른다.