01.Function.type.expressions.and.call.signatures.md

1. 함수 타입 표현식과 호출 시그니처

함수 타입 표현식

함수 타입을 타입 별칭과 함께 별도로 정의할 수 있음. = 함수 타입 표현식

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

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

→ 변수 add의 타입을 함수 타입 표현시긍로 정의한 함수 타입으로 정의

이렇게 함수 타입 표현식을 이용하면 함수 선언 및 구현 코드와 타입 선언을 분리할 수 있어 유용함

함수 타입 표현식은 다음과 같이 여러개의 함수가 동일한 타입을 갖는 경우에 요긴하게 사용됨

const add = (a: number, b: number) => a + b;
const sub = (a: number, b: number) => a - b;
const multiply = (a: number, b: number) => a * b;
const divide = (a: number, b: number) => a / b;

위 코드를 함수 타입 표현식을 사용한다면 간결하게 만들 수 있음

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

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

함수 타입 표현식이 반드시 타입 별칭과 함께 사용되어야 하는 것은 아님. 다음과 같이 그냥 함수 타입 표현식을 타입 주석에 사용해도 문제는 없음

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

호출 시그니쳐

함수 타입 표현식과 동일하게 함수의 타입을 별도로 정의하는 방식

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;

JS에서는 함수도 객체이기 때문에, 위 코드 처럼 객체를 정의하듯 함수의 타입을 별도로 정의할 수 있음.

참고로 이떄 다음과 같이 호출 시그니쳐 아래에 프로퍼티를 추가 정의하는 것도 가능함. 이렇게 할 경우 함수이자 일반 객체를 의미하는 타입으로 정의되며 이를 하이브리드 타입이라고 부름

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

const add2: Operation2 = (a, b) => a + b;
(...)

add2(1, 2);
add2.name;