[TypeScript] 프로미스와 제네릭

🧀 자바스크립트에서의 Promise

자바스크립트에서 프로미스는 Promise 라는 이름의 클래스이다.

따라서 new 연산자를 이용해 프로미스 객체를 생성한다.

const promise = new Promise((resolve, reject)=>{
    setTimeout(()=>{
        // resolve에 결과값 20을 전달
        resolve(20);
    }, 3000);
});

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

• Promise의 콜백 함수는 resolve와 reject 두 개의 매개변수를 가짐
  • resolve -> 성공 시 호출되는 함수
  • reject -> 실패 시 호출되는 함수

 

 

 

 

🧀 타입스크립트에서의 Promise

타입스크립트에서 Promise는 제네릭 클래스로 타입이 별도로 선언되어 있다.

new <T>(executor: (resolve: (value: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void): Promise<T>;

 

 

const promise = new Promise((resolve, reject)=>{
    setTimeout(()=>{
        // resolve에 결과값 20을 전달
        resolve(20);
    }, 3000);
});

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

    console.log(response * 20); // ❌
    // response의 타입이 unknown으로 추론됨
    // -> 곱셈 연산이 불가능
    // 하지만 위에서 resolve에 20을 넘겨주었음

    // promise는 비동기 작업의 결과값의 타입을 자동으로 추론할 수 있는 기능이 존재하지 않음
    // => unknown 타입으로 추론함

});

response를 콘솔창에 찍는건 가능하지만 response에 20을 곱한 값을 찍는건 오류가 발생한다.

resolve에 number타입인 20을 인자로 넘겨주었는데 왜?

Promise는 비동기 작업의 결과값의 타입을 자동으로 추론할 수 있는 기능이 존재하지 않아 unknown 타입으로 추론되기 때문이다.

즉, unknown 타입의 결과값에 곱셈 연산을 하기 때문에 오류가 발생한다.

 

 

따라서 제네릭을 이용한다.

새로운 Promise를 생성할 때 타입 변수에 할당할 타입을 직접 설정해 주면 해당 타입이 바로 resolve 결과값의 타입이 된다.

const promise = new Promise<number>((resolve, reject)=>{
    setTimeout(()=>{
        // 비동기 함수의 결과값을 number로 정의해주었기 때문에 resolve에 들어갈 인수도 number타입이여야 함 
        resolve(20);
    }, 3000);
});

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

여기서 비동기 함수의 결과값을 number로 설정했기 때문에 resolve에 들어갈 인수의 타입도 동일해야 한다.

 

 

하지만 reject함수의 결과값 타입을 정의하는 것은 불가능 하다.

위에서 정의된 Promise의 타입을 보면 reject 함수의 인수는 선택적 매개변수 reason으로 any 타입으로 정의되어 있다.

 

따라서 타입 변수로 에러의 타입을 지정할 수 없기 때문에 타입 좁히기를 사용한다.

// err의 타입은 any로 추론됨
promise.catch((err)=>{
    // 타입 변수로 에러의 타입을 지정할 수 없기 때문에 타입 좁히기를 이용
    if(typeof err === 'string'){
        console.log(err);
    }
})

 

 

 

 

---

🧀 프로미스를 반환하는 함수의 타입 정의

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

 

1. 타입 변수 

// 서버로부터 게시글의 데이터를 불러오는 함수
interface Post {
    id: number;
    title: string;
    content: string; 
}

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

const postRequest = fetchPost();

postRequest.then((post)=>{
    post.id;
})

fetchPost는 타입이 Post인 Promise 객체를 반환한다.

 

 

 

 

2. 반환값 타입 직접 명시

반환값 타입을 직접 명시하는 것이 더 직관적이다.

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

Promise는 클래스이기 때문에 타입으로도 사용이 가능하다.

 

 

 

 

 

 

---

🔗 타입스크립트 강의

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