Promise와 async의 타입

async 함수는 돌려주는 값을 Promise 상자에 담아 Promise<T> 타입으로 돌려주고, await가 그 상자를 열어 T 타입의 값을 꺼냅니다. 검사기는 이 타입을 따라가, await를 빠뜨리고 상자째 셈하는 줄을 실행하기 전에 짚어 줍니다.

제네릭 타입 — Array·Map·내 타입에서 타입 이름에 단 칸을 채워 썼습니다. Promise도 T 칸 하나를 단 제네릭 타입입니다. 이 레슨에서는 async 함수가 돌려주는 타입, 나중에 도는 콜백 안의 좁힘, 거부된 Promise가 던지는 오류의 타입을 차례로 읽습니다.

JS 다시 보기: async 함수는 return한 값을 Promise 상자에 감싸 돌려주고, Node는 그 상자를 Promise { 4000 }처럼 찍습니다. await는 상자 안의 값을 꺼내며, 모듈 파일에서는 맨 위에서도 쓸 수 있습니다(JS 'async와 await').

async function getPrice() {  return 4000;}const price = await getPrice();

async function getPrice() {  return 4000;}const price = await getPrice();

async function getPrice() {  return 4000;}const price = await getPrice();

async function getPrice() {  return 4000;}const price = await getPrice();

async function getPrice() {  return 4000;}const price = await getPrice();

1async 함수는 Promise<T>를 돌려준다

async function getPrice() {
  return 4000;
}
const price = await getPrice();
console.log(price + 500);

4500

돌려주는 타입은 return에서 추론합니다(검사 규칙 3). 2번 줄의 4000은 넓혀 number가 되고, 그 타입이 Promise 상자의 T 칸에 들어가 getPrice는 Promise<number>를 돌려줍니다. 4번 줄의 await는 상자를 열어 T 칸의 값을 꺼냅니다. 그래서 price는 T 칸에 채운 number이고, 5번 줄의 셈이 검사를 지납니다(검사 규칙 7).

4번 줄에서 await를 빼 봅니다.

async function getPrice() {
  return 4000;
}
const price = getPrice();
console.log(price + 500);

검사를 지나갈까요? 지나가지 못하면 몇 번 줄에서 막힐까요? Node로 돌리면 무엇이 찍힐까요?

main.ts(5,13): error TS2365: Operator '+' cannot be applied to types 'Promise<number>' and '500'.

[object Promise]500

2나중에 도는 콜백 안의 좁힘

JS 다시 보기: setTimeout에 넘긴 콜백은 0ms여도 지금 코드가 끝까지 돈 뒤에 불립니다(JS '나중에 하기: setTimeout'). 콜백은 만들어진 칸을 기억해, 나중에 불려도 그 칸의 이름을 읽습니다(JS '클로저: 만들어진 칸을 기억하는 함수').

확인한 갈래 안에서는 이름의 지금 타입이 좁혀집니다(검사 규칙 5). 그 갈래 안에서 만든 콜백이 나중에 불리면 어떻게 될까요? 메모가 있으면 타이머로 메모의 글자 수를 찍습니다. 1~2번 줄은 폰 화면에 맞추려고 = 뒤에서 나눈 한 문장입니다.

let memo: string | null =
  '얼음 적게';
if (memo !== null) {
  setTimeout(() => {
    console.log(memo.length);
  }, 0);
}
memo = null;

검사를 지나갈까요? 지나가지 못하면 몇 번 줄에서 막힐까요? Node로 돌리면 무엇이 찍힐까요?

main.ts(5,17): error TS18047: 'memo' is possibly 'null'.

main.ts:5    console.log(memo.length);                     ^ TypeError: Cannot read properties of null (reading 'length')    at Timeout._onTimeout (main.ts:5:22)

오류가 난 5번 줄을 고칠 줄로 보기 쉽지만, 원인은 콜백을 만든 뒤에 memo를 다시 대입하는 8번 줄입니다. 8번 줄이 없으면 memo가 null로 바뀔 길이 없어, 같은 코드가 검사를 지나고 5를 찍습니다. 플레이그라운드에서는 맨 위의 export {};를 빠뜨리면 코드를 이 과목과 다른 방식으로 읽어, 8번 줄을 지워도 TS18047이 납니다(타입 검사기가 하는 일의 '해 보기').

이제 검사 규칙 5에 콜백 줄을 더합니다.

검사 규칙 5. 검사기는 값을 모릅니다. 그래서 갈 수 있는 길을 모두 읽습니다 — if·else는 두 갈래를 모두, 반복은 덩어리 끝에서 머리로 돌아오는 길까지 읽습니다. 확인 뒤의 갈래와 대입 뒤에서는 이름의 지금 타입이 좁혀지고, 길이 다시 만나는 줄(갈래 뒤 · 반복 머리)에서는 그 줄로 오는 길들의 지금 타입이 합쳐집니다. return으로 끝난 길은 오지 않습니다. 콜백은 언제 불릴지 몰라서, 콜백을 만든 뒤에 다시 대입하는 let 이름은 콜백 안에서 좁힘을 풀고 선언 타입으로 봅니다.

고치는 길은 둘입니다. 하나는 확인한 값을 const 이름에 받아 콜백에 넘기는 것입니다.

let memo: string | null =
  '얼음 적게';
if (memo !== null) {
  const text = memo;
  setTimeout(() => {
    console.log(text.length);
  }, 0);
}
memo = null;

5

4번 줄의 text는 const라 다시 대입할 수 없으니, 콜백 안에서도 string입니다. 9번 줄이 memo를 null로 바꿔도 text는 '얼음 적게'에 붙어 있어 글자 수 5를 찍습니다. 다른 하나는 콜백 안에서 if (memo !== null)로 다시 확인하는 것입니다. 이 길도 검사를 지나지만, 타이머가 돌 때 memo가 이미 null이라 아무것도 찍히지 않습니다.

예제

검사 결과와 실행 결과를 먼저 적어 본 뒤 펼쳐 보세요. 맞혀 보기는 점수에 들지 않습니다.

JS 다시 보기: async 함수 안에서 던진 오류는 돌려주는 Promise를 거부(rejected) 상태로 만들고, 그 Promise를 await하면 그 자리에서 다시 던져져 try·catch로 잡힙니다(JS '기다리는 일의 오류').

빙수는 품절이라 getPrice가 값 대신 오류를 던집니다. 그 Promise를 try 안에서 await로 엽니다.

async function getPrice(
  name: string,
) {
  if (name === '빙수') {
    throw new Error('품절');
  }
  return 4000;
}
try {
  const p =
    await getPrice('빙수');
  console.log(p + 500);
} catch (e) {
  console.log(e.message);
}

검사를 지나갈까요? 지나가지 못하면 몇 번 줄에서 막힐까요? Node로 돌리면 무엇이 찍힐까요?

main.ts(14,15): error TS18046: 'e' is of type 'unknown'.

품절

자주 틀리는 곳

틀린 생각: async 함수를 부르면 return한 값이 바로 나온다.

return 4000;이라 적었으니, 부른 자리에 4000이 올 것 같습니다.

async function getPrice() {
  return 4000;
}
const n: number = getPrice();

main.ts(4,7): error TS2322: Type 'Promise<number>' is not assignable to type 'number'.

맞는 규칙: async 함수는 늘 Promise 상자를 돌려줍니다. 부른 자리의 타입은 Promise<number>이고, number는 await로 상자를 연 뒤에 얻습니다(1절).

틀린 생각: async 함수의 돌려주는 타입에는 return하는 값의 타입을 적는다.

return하는 값이 4000이니, 돌려주는 타입 자리에 number를 적으면 될 것 같습니다.

async function getPrice(
  name: string,
): number {
  if (name === '빙수') {
    throw new Error('품절');
  }
  return 4000;
}
getPrice('커피').then((p) => {
  console.log(p + 500);
});

main.ts(3,4): error TS1064: The return type of an async function or method must be the global Promise<T> type. Did you mean to write 'Promise<number>'?main.ts(9,16): error TS2339: Property 'then' does not exist on type 'number'.main.ts(9,22): error TS7006: Parameter 'p' implicitly has an 'any' type.

맞는 규칙: async 함수의 돌려주는 타입은 상자째인 Promise<number>로 적습니다. TS1064는 'async 함수의 돌려주는 타입은 전역 Promise<T> 타입이어야 한다. Promise<number>라고 쓰려던 것인가?'라는 뜻입니다. 9번 줄의 두 오류는 3번 줄의 number를 믿어 생긴 것이라, 3번 줄을 ): Promise<number> {로 고치면 셋이 함께 사라지고 4500을 찍습니다. 오류가 여럿이면 위에서부터 고치고 다시 검사합니다.

틀린 생각: fetch로 받은 응답을 json()으로 꺼내면, 그 값에도 알맞은 타입이 붙는다.

검사기가 fetch의 타입을 알고 있으니, 꺼낸 메뉴의 모양도 알 것 같습니다.

async function getMenu(
  url: string,
) {
  const res = await fetch(url);
  return res.json();
}

맞는 규칙: 4번 줄의 res는 응답 타입 Response이지만, 5번 줄의 res.json()은 Promise<any>를 돌려줍니다. 그래서 getMenu도 Promise<any>를 돌려주고, await로 꺼낸 메뉴는 any라 무엇을 꺼내도 검사를 지납니다(검사 규칙 6). 바깥에서 받은 값은 unknown으로 받아 확인한 뒤에 씁니다(바깥 값 확인하기).

틀린 생각: 확인한 갈래 안에서 만든 콜백이면 좁힘이 콜백 안까지 남으니, TS18047은 !로 덮어도 된다.

확인한 줄 바로 아래에서 만든 콜백이라, 검사기가 지나치게 조심하는 것처럼 보입니다. 2절 코드의 5번 줄을 console.log(memo!.length);⁠로 바꾸면 검사는 지나갑니다. 그러나 Node는 타입 글자인 !를 빈칸으로 지우고 돌려, 2절과 같은 TypeError로 멈춥니다.

맞는 규칙: !는 검사기가 null을 짚지 않게 할 뿐, 값은 그대로 둡니다(검사 규칙 6). 나중에 불릴 콜백은 그 사이 다시 대입된 값을 보니, 확인한 값을 const 이름에 받아 넘기거나 콜백 안에서 확인합니다(2절 · 검사 규칙 5).

확인 문제

1. 손님 번호로 이름을 만드는 async 함수를 부릅니다. 6 · 7번 줄의 a · b는 각각 어떤 타입일까요? Node가 찍을 값도 적어 보세요.

async function getName(
  id: number,
) {
  return '손님' + id;
}
const a = getName(1);
const b = await getName(2);
console.log(a, b);

Promise { '손님1' } 손님2

2. 잔 수로 적립 점수를 셉니다. 검사를 지나도록 3번 줄의 빈칸에 돌려주는 타입을 적으세요. 6번 줄 p의 타입과 Node가 찍을 값도 적어 보세요.

async function getPoint(
  cups: number,
): ____ {
  return cups * 100;
}
const p = await getPoint(3);
console.log(p + 50);

3. 메뉴 값마다 팁을 더해 찍습니다. 검사를 지나갈까요? 지나가지 못하면 몇 번 줄에서 막힐까요? Node로 돌리면 무엇이 찍힐까요?

let tip: number | null = 500;
if (tip !== null) {
  [4000, 4500].forEach((p) => {
    console.log(p + tip);
  });
}
tip = null;

main.ts(4,21): error TS18047: 'tip' is possibly 'null'.

4500
5000

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 1절 첫 코드를 main.ts로 저장하고, 4번 줄의 await를 지운 뒤 5번 줄을 console.log(price);로 바꿉니다. 검사 결과와 Node가 찍을 값을 먼저 적고, npx tsc로 검사한 뒤 node main.ts로 돌려 맞춰 봅니다. 편집기에서 price에 마우스를 올려 price의 타입도 확인합니다. 검사하고 돌리는 법은 내 컴퓨터에서 검사하고 돌리기에 있습니다.