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

자바(타입)스트립트에서는 함수표현식과 함수문장을 다르게 인식합니다.

function rollDice1(sides: number): number {
  return 0;
} // 문장
const rollDice2 = function (sides: number): number {
  return 0;
}; // 표현식
const rollDice3 = (sides: number): number => {
  return 0;
}; // 표현식

타입 스크립트에서는 함수 표현식을 사용하는 것이 좋습니다.
함수의 매개변수부터 반환값까지 전체를 함수 타입으로 선언하여 함수 표현식에 재사용할 수 있다는 장점이 있기 때문입니다.

example

type DiceRollFn = (sides: number) => number;
const rollDice: DiceRollFn = (sides) => {
  return 0;
};

반복되는 함수를 하나의 타입으로 통합할 수 있습니다.

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;

함수의 매개변수에 타입을 선언하는 것보다 함수 표현식 전체 타입을 정의하는 것이 코드도 간결하고 안전합니다.

async function checkedFetch(input: RequestInfo, init?: RequestInit) {
  const response = await fetch(input, init);
  if (!response.ok) {
    throw new Error("Request failed: " + response.status); //return으로 바뀌어도 오류를 잡아내지 못함
  }
  return response;
}

const checkedFetch: typeof fetch = async (input, init) => {
  const response = await fetch(input, init);
  if (!response.ok) {
    throw new Error("Request failed: " + response.status); // return으로 바뀌면 오류를 잡아냄
  }
  return response;
};

다른 함수의 시그니처를 사용하기 위해 typeof fn을 사용면 됩니다.

출처

<이펙티브 타입스크립트> (댄 밴더캅 지음, 장원호 옮김, 인사이트, 2021)