[TS] 프로미스와 제네릭

프로미스의 타입 추론

Promise 객체를 생성하고 3초 후 20을 반환하는 코드를 작성해보자.

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

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

 

Promise는 resolve로 전달하는 결과값의 타입을 자동으로 추론하지 못하고 unknown 타입으로 추론한다.

 

resolve 타입 지정

타입 변수에 타입을 지정하면 resolve 결과값의 타입이 정확히 추론된다.

 

reject와 에러처리

Promise의 catch 메서드에서 에러 매개변수는 항상 any 타입으로 추론된다.

 

그리고 타입 변수로 에러 타입을 지정할 수 없기 때문에, 타입 좁히기로 안전하게 처리하는 것이 권장된다.

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

 

 

프로미스 반환 함수 타입 정의

게시글을 불러오는 함수를 작성해보자.

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

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

함수가 Promise를 반환할 때 타입을 정의하는 방법은 두 가지가 있다.

방법 1: Promise 생성자에 타입 지정

function fetchPost() {
  return new Promise<Post>((resolve, reject) => {
    // ...
  });
}

 

방법 2: 함수 반환 타입 명시

함수 선언부에서 반환 타입을 명시하는 방법이 더 직관적이다.

function fetchPost(): Promise<Post> {
  return new Promise((resolve, reject) => {
    // ...
  });
}

함수 첫 줄에서 반환 타입을 확인할 수 있어 협업 시 권장되는 방식이다.