아이템 12 - 함수 표현식에 타입 적용하기

자바스크립트에서 함수를 선언하려면 다음 중 한 가지 방식을 선택할 수 있다.

• 함수 문장 (statement)
• function rollDice1(sides) { /* ... */ } // Statement
• 함수 표현식 (expression)
• const rollDice2 = function(sides) { /* ... */ }; // 무기명 함수를 변수에 할당 const rollDice3 = (sides) => { /* ... */ }; // 화살표 함수를 변수에 할당

타입스크립트에서 함수를 선언할 때, 함수 문장보다는 함수 표현식을 사용하는 것이 더 좋은데 이유는 다음과 같다.

• 함수 시그니처를 함수 표현식에 사용할 수 있기 때문에 불필요한 코드의 반복을 줄일 수 있다.
• 함수 구현부와 타입 선언부가 분리되어 있어 로직이 보다 분명해진다.

type BinaryFn = (a: number, b: number) => number;
const add: BinaryFn = (a, b) => a + b;
const sub: BinaryFn = (a, b) => a - b;
const mul: BinaryFn = (a, b) => a * b;
const div: BinaryFn = (a, b) => a / b;

💡 함수 시그니처(Call Signature)란?

함수의 매개변수와 반환 타입을 모두 타입으로 선언해 둔 것을 말한다.

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

만약 이미 선언된 함수의 시그니처를 참조하려면 typeof 연산자를 사용하면 된다.

function f() {
      return { x: 10, y: 3 };
}
type F = typeof f;
// type F = () => { x: number; y: number; }

만약 라이브러리를 직접 만들고 있다면, 공통 함수 시그니처를 타입으로 제공하는 것이 좋다. 예를 들어, 리엑트는 함수의 매개변수에 명시하는 MouseEvent 타입 대신에 함수 전체에 적용할 수 있는 MouseEventHandler 타입을 제공한다.