`async` / `await` Typing

"async 가 return wrap; await 가 Promise unwrap. 같은 연산의 두 반쪽."

두 반쪽

async function 가 return 이 항상 Promise 로 wrap 되는 함수 선언. Async 함수 안 await expression 가 Promise resolve 까지 pause, 그다음 resolved 값으로 재개. 결과: async 코드가 동기 코드처럼 읽혀, 근데 type system 이 호출 가로질러 Promise wrapper 추적.

암묵 return wrapping

Async 함수에서 plain 값 return: TypeScript 가 자동으로 Promise 로 wrap. async function f(): Promise<number> { return 42 } — `return 42` 가 `Promise` 됨.

Async 함수에서 Promise return: TypeScript 가 flatten. async function g(): Promise<User> { return fetchUser(1) /* Promise<User> 반환 */ } — 결과 여전히 `Promise`, `Promise>` 아냐. Promise 가 nest 안 함.

Non-Promise 에 await

`value` 가 Promise 아닌 await value 가 그냥 값으로 resolve. Runtime 이 내부적으로 `Promise.resolve` 로 wrap. 즉 `await 42` 가 `42`. 가끔 유용; 명시적으로 거의 안 써.

정신 모델: async 함수가 Promise 반환; await 가 그 Promise 안 들여다봐. 모든 async 표현이 한 레벨에 Promise 타입과 한 레벨 깊이에 unwrapped 타입 가짐. Wrapper 가 타입 checker 한테 뭐 일어나는지 알리는 거.

Code

async wrap, await unwrap·typescript

// async 가 return 을 Promise<T> 로 wrap.
async function getNumber(): Promise<number> {
  return 42;                          // wrap → Promise<number>
}

// Promise return — flatten.
async function getUser(): Promise<User> {
  return fetchUser(1);                // Promise<User> 반환, Promise<Promise<User>> 아님
}

// await — async 함수에서만 unwrap.
async function main() {
  const n = await getNumber();        // n: number
  const u = await getUser();          // u: User

  // Non-Promise 에 await — 그냥 값 반환.
  const x = await 42;                  // x: number
}

// Top-level await — ESM 에 작동, default 로 CommonJS 안 됨.
const data = await fetch('/api/data');  // modern ESM module 에 유효

Exercise

User await 하고, 그들 post await 하고, 둘 결합한 Profile 반환하는 async 함수 loadProfile(id: number): Promise<Profile> 써. Hover 통해 각 중간 값이 unwrapped 타입 가지는지 확인.

Hint

각 await fetchUser(id) 가 Promise<User> 를 User 로 unwrap. 결합은 그냥 async 함수에서 반환된 plain object literal — TypeScript 가 자동으로 Promise 로 다시 wrap.

두 반쪽

암묵 return wrapping

Non-Promise 에 await

Code

External links

Exercise

Progress

댓글 0