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

item12.md

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

자바스크립트에서는 함수를 선언할때 함수 문장과 함수 표현식을 사용합니다.

function dice(input) { } // 함수 문장
const dice = (input) => { } // 함수 표현식

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

함수 표현식 사용의 장점

함수 문장과 함수 표현식을 비교해 보겠습니다.

function add(a: number, b: number) { return a + b }
function sub(a: number, b: number) { return a - b }

type mathFn = (a:number, b: number) => number
const add: mathFn = (a, b) => a + b
const sub: mathFn = (a, b) => a - b

위의 두 경우를 비교해보면 함수 표현식을 사용했을때 다음과 같은 장점이 있습니다.

• 중복된 함수타입 선언을 제거
• 함수 타입과 구현부가 분리되어 있어서, 로직이 분명해짐(가독성)
• 함수 표현식은 반환타입(number)까지도 선언(추론이 가능하나 명확하게 지정)

기존에 있는 함수와 동일한 시그니처 사용에도 함수 표현식이 좋습니다.

fetch 함수는 요청이 실패했을때 reject 된 promise 를 반환하지 않습니다. 함수를 호출한 곳에서 사용하기 쉽도록 커스텀 함수를 작성할 때 함수 표현식으로 작성하면 기존 타입을 재사용할 수 있습니다.

const customFetch: typeof fetch = async (input, init) => {
  const response = await fetch(input, init);
  return response.ok ? response : throw new Error('Request failed')
}

결론

타입스크립트에서는 함수 타입과 구현부를 분리하여 함수 표현식으로 작성하는 것이 좋습니다.