함수 표현식에 타입 적용하기

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

함수의 문장 표현

function rollDice1(sides: number): number { /* ... */ }

함수 표현식

const rollDice2 = function(sides: number): number { /* ... */ }
const rollDice3 = (sides: number) : number => { /* ... */ }

타입스크립트에서는 함수 표현식을 사용하는 것이 좋습니다.

그 이유는 아래와 같이 정리할 수 있습니다.

• 함수의 매개변수, 반환값까지 전체를 함수 타입으로 선언하여 함수 표현식에 재사용할 수 있습니다.

type DiceRollFn = (sides: number) => number;
const rollDice: DiceRollFn = 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;

fetch 함수 응답 예제를 확인해보자.

• 정상적으로 데이터를 받는 경우 json
• 비 정상적인 데이터를 받는 경우 json 이 아닌 오류 메세지를 담은 rejected Promise를 반환합니다.

// lib.dom.d.ts에 다음과 같이 작성되어 있습니다.
declare function fetch(
 input: RequestInfo, init?: RequestInit
): Promise<Response>;

async function checkedFetc(input: RequestInfo, init?: RequestInit) {
  const response = await fetch(input, init);
  if (!response.ok) {
    // 비동기 함수 내에서 거절된 프로미스로 변환합니다.
    throw new Error('Request failed: ' + response.status);
  }
  return response;
}

간결하게 작성해보기

• 함수 표현식을 이용하여, 함수 전체에 타입을 적용
  ➡ 타입스크립트가 자동으로 input 과 init 을 추론할 수 있게 해 줍니다.
• 타입 구문 또한 checkedFetch 의 반환데이터를 보장합니다.

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;
}

throw 대신 return을 사용했다면, 타입스크립트는 그 실수를 잡아냅니다.

const checkedFetch: typeof fetch = async (input, init) => {
  // Error 'Promise<Response | Error>' 형식은 Promise<Response> 형식에 할당할 수 없습니다.
  const response = await fetch(input, init);
  if (!response.ok) {
    return new Error('Request failed: ' + response.status);
  }
  return response;
}

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