Promise 리턴 타입 오류

문제

async/await 비동기 처리 함수 내에서 특정 정보들이 담긴 아이템 리스트를 서버로부터 전달 받아 반환하도록 다음과 같이 코드를 작성하였다.

export interface ItemType {
    created_at:     number;
    key:            string;
    expires_at:     number;
    download_count: number;
    count:          number;
    size:           number;
    summary:        string;
    thumbnailUrl:   string;
    files:          File[];
    sent?:          Sent;
}

export const getItemData = async (): ItemType[] => {
    const { data } = await axios.get('https://romantic-hopper-546d5e.netlify.app/data/itemInfoList.json');
    
    return data;
}

 

하지만 의도한 결과가 아닌 다음과 같은 타입 오류가 발생하였다.

'ItemType[]' 형식은 Promise 호환 생성자 값을 참조하지 않으므로 ES5/ES3에서 유효한 비동기 함수 반환 형식이 아닙니다.ts(1055)

 

문제해결

async function은 항상 Promise 객체를 리턴하고 await에서 코드 실행을 일시 중지하고 함수에서 반환된 Promise 객체의 결과를 기다린다.

 

async function은 항상 비동기 연산 과정을 거치기 때문에 Promise 객체를 리턴하기 때문에 위 코드에서도 서버에서 전달 받은 데이터 타입 그 자체를 리턴 타입으로 명시해주는 것이 아니라 Promise<F> 타입 형식을 지정해줘야 되었다.

export const getItemData = async (): Promise<ItemType[]> => {
    const { data } = await axios.get('https://romantic-hopper-546d5e.netlify.app/data/itemInfoList.json');
    
    return data;
}

 

Reference

https://radlohead.gitbook.io/typescript-deep-dive/future-javascript/async-await

Async Await - TypeScript Deep Dive