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

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리

📍요약

✅매개변수나 반환 값에 타입을 명시하는것 보다 함수 표현식 전체에 타입을 할당하는 것이 좋다

(재사용성, 간결성 증가)

 

✅다른 함수의 시그니처를 참조하려면 typeof (함수 이름) 을 사용하면 된다

📍statement (문) vs expression (표현식)

함수를 문, 표현식 방법으로 정의할 수 있다

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

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

 

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

- 그대로 가져다 함수 시그니처를 만드는데 재사용 가능

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

// 함수 시그니처 : const -> type
type DiceRollFn = (sides: number) => number;

// 함수에 타입 할당
const rollDice: DiceRoleFn = sides => {/* ... */}

 

📍fetch 함수의 타입 선언

declare 되어 있으면 타입 활용 가능

- 내장 함수들은 미리 타입 선언 되어있음 : ~ d.ts 파일

// ilb.dom.d.ts 에 존재
declare function fetch(
    input: RequestInfo, init?: RequestInit
): Promise<Response>;

// 비동기 함수 작성
const checkedFetch1 = async (input: RequestInfo, init?: RequestInit) => {
    const res = await fetch(input, init);
    if (!res.ok) {
        throw new Error("Request failed : " + res.status);
    }
    return res;
}

// 리팩토링 -> fetch 타입 선언을 활용
const checkedFetch2: typeof fetch = async (input, init) => {
    const res = await fetch(input, init);
    if (!res.ok) {
        throw new Error("Request failed : " + res.status);
    }
    return res;
}

 

error를 return 하는 오타도 타입스크립트가 캐치할 수 있다

(무조건 promise를 반환해야 함)