async, await, Promise 타입과 Awaited

기본 패턴

async function fetchUser(id: string): Promise<User> {
  const res = await api.get(`/users/${id}`);
  return res.data;
}

type UserResult = Awaited<ReturnType<typeof fetchUser>>;

설명

• async 함수는 값을 직접 반환하는 것처럼 보여도 타입 수준에서는 항상 Promise<...>를 반환합니다. 그래서 비동기 함수의 핵심 타입은 "최종 결과 타입"이 아니라 "Promise 안에 무엇이 들어 있나"입니다.
• await는 Promise를 풀어 안쪽 값을 꺼내는 문법이고, TypeScript는 이 과정을 타입 수준에서도 추적합니다. 즉 await promiseOfUser를 하면 결과 타입은 User가 됩니다.
• Awaited<T>는 이런 언랩 과정을 타입으로 표현하는 유틸리티입니다. 중첩 Promise나 PromiseLike가 섞인 타입을 다룰 때 특히 유용합니다.
• 실무에서는 Promise<T>를 명시하는 것만큼, API helper와 wrapper 함수의 반환 타입을 중복 없이 재사용하는 일이 중요합니다. 이때 ReturnType과 Awaited 조합이 자주 등장합니다.
• 결국 TypeScript의 비동기 타입 설계는 "지금 이 값이 Promise 자체인가, 이미 풀린 결과인가"를 명확히 구분하는 습관에서 시작합니다.

빠른 정리

주의할 점