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

자바스크립트와 타입스크립트에서는 함수 '문장(statement)'과 함수 '표현식(expression)'을 다르게 인식한다.

function rollDice1(sides: number): number { /* ... */ }  // Statement
const rollDice2 = function(sides: number): number { /* ... */ };  // Expression
const rollDice3 = (sides: number): number => { /* ... */ };  // Also expression

📍 타입스크립트에서는

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

예시

type DiceRollFn = (sides: number) => number;
const rollDice: DiceRollFn = sides => { /* ... */ };

타입스립트는 sides의 타입을 number로 인식한다. → 함수 타입 선언의 장점

⭐️ 함수 타입 선언의 장점

🔗 불필요한 코드의 반복을 줄인다.

function add(a: number, b: number) { return a + b; }
function sub(a: number, b: number) { return a - b; }
function mul(a: number, b: number) { return a * b; }
function div(a: number, b: number) { return a / b; }

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

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;

함수 구현부도 분리되어 로직이 분명해진다. 모든 함수 표현식의 반환타입까지 number로 선언한 것이다.

🔗 라이브러리는 공통 함수 시그니처를 타입으로 제공하기도 한다.

리액트는 MouseEvent 타입 대신에 함수 전체에 적용할 수 있는 MouseEventHandler 타입을 제공한다. 라이브러리를 직접 만드는 경우, 공통 콜백 함수를 위한 타입 선언을 제공하는 것이 좋다.

🔗 시그니처가 일치하는 다른 함수가 있을 때도 함수 표현식에 타입을 적용해볼만 하다.

웹브라우저에서 fetch 함수는 특정 리소스에 HTTP 요청을 보낸다. response.json() 또는 response.text()를 사용해 응답의 데이터를 추출한다.

const response = fetch('/quote?by=Mark+Twain');
//    ^? const response: Promise<Response>

async function getQuote() {
  const response = await fetch('/quote?by=Mark+Twain');
  const quote = await response.json();
  return quote;
}
// {
//   "quote": "If you tell the truth, you don't have to remember anything.",
//   "source": "notebook",
//   "date": "1894"
// }

여기에 버그가 있다. /quote 가 존재하지 않는 API라면 '404 Not Found'를 응답한다. 응답은 json 형식이 아닐 수 있기 때문에 response.json()은 JSON 형식이 아니라는 새로운 오류 메세지를 담아, 거절된 프로미스를 반환한다.

→ 새로운 오류 메시지가 전달되어 실제 오류인 404가 감춰진다.

fetch가 실패하면 거절된 프로미스를 응답하지 않는다는 걸 간과하기 쉽다.

→ 상태 체크를 수행해 줄 checkedFetch 작성해보자.

declare function fetch(
  input: RequestInfo, init?: RequestInit,
): Promise<Response>;

async function checkedFetch(input: RequestInfo, init?: RequestInit) {
  const response = await fetch(input, init);
  if (!response.ok) {
    // 비동기 함수 내에서는 거절된 프로미스로 변환한다.
    throw new Error(`Request failed: ${response.status}`);
  }
  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 response;
}

1️⃣ 함수 문장을 함수 표현식으로 바꾸고 함수 2️⃣ 전체에 타입(typeof fetch)을 적용한다.

→ 타입스크립트가 input과 init의 타입을 추론할 수 있게 해준다.

3️⃣ checkedFetch의 반환 타입을 보장하며, fetch와 동일하다. (throw 대신 return을 사용했다면, 타입스크립트가 실수를 잡아낸다.)

const checkedFetch: typeof fetch = async (input, init) => {
  //  ~~~~~~~~~~~~
  //  'Promise<Response | HTTPError>' is not assignable to 'Promise<Response>'
  //    Type 'Response | HTTPError' is not assignable to type 'Response'
  const response = await fetch(input, init);
  if (!response.ok) {
    return new Error('Request failed: ' + response.status);
  }
  return response;
}

⭐️ 정리

함수의 매개변수에 타입을 선언하는 것보다 함수 표현식 전체 타입을 정의하는 것이 코드도 간결하고 안전하다. 다른 함수의 시그니처와 동일한 타입을 가지는 새 함수를 작성하거나, 동일한 타입 시그니처를 가지는 여러 개의 함수를 작성할 때는 매개변수의 타입과 반환 타입을 반복해서 작성하지 말고, 함수 전체의 타입 선언을 적용해야 한다.

📍 요약

• 매개변수나 반환 값에 타입을 명시하기보다는 함수 표현식 전체에 타입 구문을 적용하는 것이 좋다.

• 만약 같은 타입 시그니처를 반복적으로 작성한 코드가 있다면 함수 타입을 분리해 내거나 이미 존재하는 타입을 찾자. 라이브버리를 직접 만든다면 공통 콜백에 타입을 제공해야 한다.

• 다른 함수의 시그니처를 참조하려면 typeof fn을 사용하면 된다.