프로미스와 제네릭

한 입 크기로 잘라먹는 타입스크립트 - 프로미스(Promise)


1. 프로미스
자바스크립트 내장클래스 Promise 는 타입스크립트에서 제네릭 클래스로 타입이 별도로 선언되어 있다.
컨트롤 키를 눌러 Promise 를 클릭하면 lib.es2018.promise.d.ts 에 타입 변수를 활용하는 제네릭 인터페이스로 선언되어 있다.
생성자 함수의 타입 정의는 lib.es2015.promise.d.ts 에서 확인 가능하다.
Promise 생성자 호출시 타입 변수를 할당해주면, 비동기 처리 결과값의 타입을 직접 명시할 수 있다. 하지만 실패했을 때 타입은 정해줄 수가 없다.
Promise 생성자 호출시 타입 변수를 할당하지 않으면, 비동기 처리 결과값의 타입이 unknown 타입으로 추론된다.

- chapter5.ts

/**
 * 프로미스
 */
// Promise 객체 생성
// 비동기 처리를 실제로 하는 함수(실행자 함수)를 매개변수로 보냄
// resolve(결과값) : 비동기 작업 성공했을 때 호출하는 함수. 매개변수로는 비동기 작업 결과값 전달.
// reject() : 비동기 작업 실패했을 때 호출하는 함수. 매개변수로는 비동기 작업 실패 이유 전달.
const promise = new Promise<number>((resolve, reject) => { // 비동기 작업 결과값의 타입을 타입 변수에 할당
    setTimeout(() => {
        resolve(20); // 성공 - 매개변수 타입 number
        reject('~ 때문에 실패'); // 실패 - 매개변수 타입 선택적 매개변수에 any
    }, 3000);
}); // 자바스크립트 내장 클래스 Promise

// then 메서드 사용하여 결과값 처리
promise.then((response) => {
    console.log(response); // 20
    console.log(response * 10); // 오류 - response 타입이 unknown
});

// catch 메서드 사용하여 실패했을 때 처리
promise.catch((err) => {
    // 타입 좁히기 : err 의 타입은 any 이기 때문.
    if (typeof err === 'string') {
        console.log(err);
    }
});

2. 프로미스를 반환하는 함수의 타입을 정의
협업의 관점으로 보면 함수의 선언부만 봐도 반환값 타입을 바로 확인 가능하기 때문에 추천한다. 가독성이 좋기 때문이다.

- chapter5.ts

...
/**
 * 프로미스를 반환하는 함수의 타입을 정의
 */
interface Post {
    id: number;
    title: string;
    content: string;
}

// 게시글 하나 불러오는 함수
function fetchPost(): Promise<Post> { // 함수의 반환값 타입 직접 명시 (추천 : 협업의 관점으로 보면 함수의 선언부만 봐도 반환값 타입을 바로 확인 가능하기 때문 - 가독성이 좋음)
    // return new Promise<Post>((resolve, reject) => { // Promise<Post> 도 타입으로 활용 가능
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve({
                id: 1
              , title: '게시글 제목'
              , content: '게시글 컨텐츠'
            });
        }, 3000);
    });
}

const postRequest = fetchPost();

// 결과값 처리
postRequest.then((post) => {
    post.id
});

참고링크 : https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8#

한 입 크기로 잘라먹는 타입스크립트(TypeScript) 강의 | 이정환 Winterlood - 인프런