프로미스와 제네릭

Promise - resolve

JS를 사용하면 비동기 통신 작업을 위해 promise 객체를 사용하는 경우가 많다. 아래 간단한 promise 코드를 보자.

프로미스 1

 

3초 뒤 숫자 20을 응답해주는 간단한 코드이다. 응답 값이 숫자 20이니까 이 값을 변경시켜보면 어떨까?

프로미스 2

 

안타깝게도 응답 값은 숫자 20이지만 타입 정의를 하지 않아 response의 타입은 unknown으로 추론된다. 따라서, TS에서는 응답 값의 가공을 위해서는 타입 정의를 해줘야 한다.

프로미스 3

 

위 코드처럼 Promise 객체에 number 타입을 지정해줌으로써 응답 값의 가공이 가능해졌다.

Promise - reject

그럼 이번에는 에러를 담당하는 reject를 살펴보자.

reject 1

 

reject에 경우에는 unknown 타입이 아닌 any 타입이다. 따라서, 따로 타입을 정의할 수 없고 개발 상황에 맞춰서 타입 좁히기를 해주어야 한다. 일반적으로 에러구문으로 string을 많이 사용하니 그것으로 예시를 사용하겠다.

reject 2

사용 예시

게시글 불러오기와 같은 비동기 처리에서 사용되는 예시를 하나 보여주려 한다.

게시글 1

 

우선, 게시글 객체의 타입을 정의하고 게시글을 불러오는 함수를 정의한다.

게시글 2

 

그리고 게시글 불러오기 함수를 인스턴스화해서 비동기 처리를 해준다. 앞서 설명했듯이 response 타입이 명시되지 않아 에러가 발생했다.

이를 해결하는 방법으로 두 가지가 있다.

 

1. Promise 객체에 타입 정의하기

게시글 3

 

2. 함수에 반환 타입 정의하기

게시글 4

 

일반적으로 2번 방식으로 작성하는 것을 추천한다.

참고자료

한 입 크기로 잘라먹는 타입스크립트(TypeScript)

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