`Promise<T>`: 나중에 도착할 값의 타입

"Promise의 T는 기다리는 시간의 타입이 아니라, 성공했을 때 받을 값의 타입이야."

비동기 결과를 감싸는 계약

Promise<User>는 작업이 끝난 뒤 User를 줄 수 있다는 뜻이야. 아직 값이 없다는 시간 상태는 Promise 자체가 담당하고, 제네릭 인자 User는 성공 결과의 모양을 설명해. then 콜백의 인자와 await 결과도 이 타입에서 이어져.

new Promise<T>((resolve, reject) => ...)를 직접 만들 때는 resolve에 넘길 값으로 T가 추론될 수 있지만, 콜백이 복잡하면 명시하는 편이 오류를 줄여. reject 쪽은 타입 인자에 포함되지 않아. JavaScript Promise는 거절 값의 타입을 별도로 추적하지 않기 때문이야.

Promise를 만들고 소비하는 네 경로

Promise는 async 함수, new Promise<T>, Promise.resolve나 Promise.reject, 그리고 fetch나 파일 API 같은 라이브러리 호출에서 만들어져. 소비할 때는 .then 체인이나 async 함수 안의 await를 써. fetchUser().then(user => user.name)과 const user = await fetchUser()는 같은 값을 다루지만, await 형식이 보통 더 평평하고 try/catch와 잘 이어져.

비동기 합성

async 함수는 다른 async 함수를 기다리고 파생 값을 반환하며 자연스럽게 합성돼. 각 단계에서는 await로 T를 꺼내 쓰고, 최상위 호출자에게는 다시 Promise<T> 계약이 전달돼.

Promise<T>는 미래의 성공 값을 설명할 뿐, 실패 형식이나 외부 데이터의 진실성까지 보장하지 않아. 시간, 실패, 검증을 각각의 문제로 나눠.

Code

Promise<T> — 생산과 소비·typescript

// Promise<T> — 미래 값.
async function fetchUser(id: number): Promise<User> {
  const res = await fetch(`/users/${id}`);
  return res.json() as Promise<User>;  // res.json() 가 Promise<any>; narrow
}

// Await — Promise unwrap.
async function main() {
  const user = await fetchUser(1);     // user: User
  console.log(user.name);
}

// .then 체인 — 같은 효과, 옛 문법.
fetchUser(1).then((user) => {
  console.log(user.name);              // callback 의 user: User
});

// Promise.resolve 와 reject.
const ready: Promise<number> = Promise.resolve(42);
const failed: Promise<never> = Promise.reject(new Error('nope'));

Exercise

fetchUser(1).then(u => fetchPosts(u.id)).then(posts => posts.length) 체인을 async/await로 바꿔. 두 버전이 같은 게시물 개수 값을 반환하는지 확인해.

Hint

사용자와 게시물을 각각 기다린 뒤 게시물 개수를 반환해. 중간 값에 이름이 생기므로 Promise 체인보다 데이터 흐름을 위에서 아래로 읽기 쉬워.

비동기 결과를 감싸는 계약

Promise를 만들고 소비하는 네 경로

비동기 합성

Code

External links

Exercise

Progress

댓글 0