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

이 글은 이펙티브 타입스크립트 '아이템 12 함수표현식에 타입 적용하기'를 정리한 글입니다.

 

 

• 자바스크립트에서는 함수 ‘문장’과 함수 ‘표현식’을 다르게 인식한다.

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

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

 

장점1 : 함수 타입의 선언은 불필요한 코드의 반복을 줄인다.

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;

• 사칙 연산을 하는 함수 네개에서 반복되는 함수 시그니처를 하나의 함수 타입으로 선언해 사용했다.
• 타입구문이 적고, 함수 구현부도 분리되어있어 로직이 보다 분명해진다.

 

 

장점2 : 안전하게 오류를 체크한다.

시그니처가 일치하는 다른 함수

• quote 가 존재하지 않을 때 404 응답을 보낸다.
• 응답은 JSON 형식이 아닐 수 있다. → 새로운 오류 등장
• 원래 오류인 404가 감춰진다. (새로운 오류메시지가 전달되었기 때문)

const responseP = fetch('/quote?by=Mark+Twain') // Type is Promise<Response>
async function getQuote() {
  const response = await fetch('/quote?by=Mark+Twain')
  const quote = await response.json()
  return quote
}

• 함수 문장을 함수 표현식으로 바꾸고, 함주 전체에 타입 typeof fetch를 적용한다.
  • 타입스크립트가 input과 init의 타입을 추론할 수 있게 되었다.

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
}

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

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

 

요약

• 반환값이나 매개변수에 타입을 명시하는 것 보다 함수 표현식 전체에 타입 구문을 적용하는 것이 좋다.
• 만약 같은 타입 시그니처를 반복적으로 작성한 코드가 있다면 함수 타입을 분리해내거나 이미 존재하는 타입을 찾아보도록 한다.
  • 라이브러리를 직접 만든다면 공통 콜백에 타입을 제공해야 한다.
• 다른 함수의 시그니처를 참조하려면 typeof fn 을 사용하면 된다.