jaenny.dev
article thumbnail

문제

Promise와 같은 타입에 감싸진 타입이 있을 때, Promise 내부에 감싸진 타입이 무엇인지 어떻게 알 수 있을까요?

예를 들어, Promise<ExampleType>이 있을 때 ExampleType을 어떻게 얻을 수 있을까요?

type ExampleType = Promise<string>

type Result = MyAwaited<ExampleType> // string

 

풀이

먼저 error를 내야하는 케이스를 고려해줍니다.

제네릭 타입으로는 Promise에 감싸진 타입 혹은, then을 메서드로 가지는 Promise와 같은 타입을 받아야 합니다.

이 경우가 아니라면 error를 내도록 Promise<any>extends하도록 제네릭 T를 제한해줍니다.

 

 

그 다음 Promise 내부의 타입에 접근합니다. infer를 사용해줍니다.

 

먼저 T extends Promise<infer U>Promise 내부의 타입에 접근하기 위한 변수 U를 선언합니다.

만약, U에 접근할 수 없다면 never로 처리합니다.

 

반복적으로 Promise로 감싼 타입도 고려해야 합니다.

U가 다시 한번 Promise에 감싸져 있다면, 재귀함수로 처리해주고 그렇지 않다면 U 타입을 바로 반환합니다.

 

그런데 ❗ 이렇게 작성하면 마지막 케이스를 통과하지 않습니다.

마지막 케이스는 Promise로 묶인게 아니라 Promise의 동작과 비슷하게 then 메서드를 가진 타입입니다.

이런 경우는 어떻게 처리할까요?

 

 

정답

타입스크립트에서는 이런 경우를 처리하기 위해 PromiseLike라는 타입을 지원합니다.

Promise 타입들을 PromiseLike로 바꿔주면 모든 케이스를 통과하게 됩니다.

 

 

PromisePromiseLike에 대해 더 알고싶다면? ⬇️

https://jaenny-dev.tistory.com/5#article-1-2-

 

-Like 타입은 뭘까? Array vs. ArrayLike / Promise vs. PromiseLike

타입스크립트에는 -Like 타입이 있다. Array와 ArrayLike, Promise와 PromiseLike -Like postFix가 붙여진 타입이 왜 필요한지 알아보자. Array vs. ArrayLike Array lib.es2015.core.ts 파일에서는 Array 타입을 다음과 같이

jaenny-dev.tistory.com

 

profile

jaenny.dev

@jaenny.dev

Go Beyond! Front-end developer, jaenny✨