Cherry & Cherish
[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 을 사용하면 된다.
'Programming > TypeScript' 카테고리의 다른 글
[TypeScript] 문서에 타입 정보를 쓰지 않기 (0) | 2023.04.25 |
---|---|
[TypeScript] 타입 연산과 제너릭 사용으로 반복 줄이기 (0) | 2023.04.22 |
[TypeScript] 타입과 인터페이스의 차이점 알기 (0) | 2023.04.20 |
[TypeScript] 잉여 속성 체크란 무엇일까? (0) | 2023.04.14 |
[TS] Any 타입을 왜 쓰면 안될까? (0) | 2023.04.04 |
Comments