Promise 사용하기

// 프로미스 객체 생성

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(20);
  }, 3000);
});

// 결과값을 이용하는 코드

promise.then((response) => {
  console.log(response); // 20
});

Promise는 resolve나 reject를 호출해서 전달하는 비동기작업의 결과값의 타입을 자동으로 추론하지 못하고 아래와 같이 기본적으로 unknown타입으로 추론한다.

따라서 다음과 같이 타입 변수에 할당할 타입을 직접 설정해주면 해당 타입이 바로 `resolve` 결과값의 타입이 된다.

Promise의 catch메서드를 사용할 때에는 매개변수의 타입을 정확히 알 수 없고, any타입으로만 들어온다.

const promise = new Promise<number>((resolve, reject) => {
  setTimeout(() => {
    // resolve(20);
    reject("~ 때문에 실패");
  }, 3000);
});

// ...중략

promise.catch((err) => {
  // 생략
});

그리고 타입변수로도 이 에러의 타입을 확실히 지정해줄 수 없기 때문에 다음과 같이 타입 좁히기를 통해 안전하게 사용하는 것을 권장한다.

promise.catch((err) => {
  if (typeof err === "string") {
    console.log(err);
  }
});

Promise를 반환하는 함수의 타입을 정의하기

interface Post {
  id: number;
  title: string;
  content: string;
}

function fetchPost() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        id: 1,
        title: "게시글 제목",
        content: "게시글 컨텐츠",
      });
    }, 3000);
  });
}

만약 어떤 함수가 Promise 객체를 반환한다면 함수의 반환값 타입을 위해 다음과 같이 할 수 있다.

방법 1.

function fetchPost() {
  return new Promise<Post>((resolve, reject) => {
    setTimeout(() => {
      resolve({
        id: 1,
        title: "게시글 제목",
        content: "게시글 컨텐츠",
      });
    }, 3000);
  });
}

방법 2.

또는 더 직관적으로 다음과 같이 반환값 타입을 직접 명시해도 된다.

function fetchPost(): Promise<Post> {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        id: 1,
        title: "게시글 제목",
        content: "게시글 컨텐츠",
      });
    }, 3000);
  });
}

이 방식은 함수의 첫 줄에서부터 확인이 가능하기 때문에 협업의 관점에서 권장된다.