[TypeScript] 프로미스와 제네릭

프로미스와 제네릭

• Promise는 제네릭 클래스로 구현되어 있다.
• 따라서 새로운 Promise를 생성할 때 타입 변수에 할당할 타입을 직접 설정하면 해당 타입이 resolve 결과값의 타입이 된다.

const promise = new Promise<number>((resolve, reject) => {
  setTimeout(() => {
    // 결과값 : 20
    resolve(20);
  }, 3000);
});

promise.then((response) => {
  // response는 number 타입
  console.log(response);
});

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

• reject 함수에 인수를 전달하는 값(실패의 결과값) 타입은 정의할 수 없다.
• unknown 타입으로 고정되어 있기 때문에 catch 메서드에서 사용하기 위해서는 타입 좁히기로 안전하게 사용하는 것을 권장한다.

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

• 프로미스를 반환하는 함수의 타입을 정의할 때는 위와 같이 return 하는 Promise에 정의할 수 있다.

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

• 하지만 가독성을 고려하면 해당 함수 자체에 반환값(Promise) 타입을 직접 명시하는 것이 더 좋다.

 

---

 

**출처: 한 입 크기로 잘라먹는 타입스크립트 (인프런, 이정환 강사님)