[TSCH][타입스크립트 연습](2) Get Return Type (ReturnType 구현)

블로그에 이펙티브 타입스크립트에 관해 공부한 내용들을 정리를 하면서 반년 정도의 시간이 흘렀다.
그동안 타입스크립트 공부에 대해 조금 소홀힌 나를 반성하면서 타입스크립트 연습문제들을 풀어보면서 다시 한번 기강을 잡으려한다.

이용하려는 사이트는 아래 깃헙 페이지와 같다.
GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge

GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge

깃헙 페이지 내 여러 문제 리스트

이 중에서 원하는 문제를 선택해서 풀수있다.
클릭을 하면 아래와 같은 깃헙 페이지로 이동을 하게되는데 여기서 파란색을 [Take the Challenge]을 클릭을 하게되면 문제를 풀수 있는 타입스크립트 플레이그라운드 페이지로 이동하게 된다.

Take the Challenge를 통해 타입스크립트 플레이그라운드로 이동할 수 있다

---

내가 도전할 첫번째 문제는 아래와 같다.
먼저 아래 문제를 먼저 풀어보거나 한번 훑어보고 아래의 내용들을 살펴보면 좋을 것 같다.

https://tsch.js.org/2/play

TS Playground - An online editor for exploring TypeScript and JavaScript

 

---

구현해야할 코드는 "Your Code Here"에 있다.
이번 문제의 경우 MyReturnType<T>을 구현하면 된다..

MyReturnType<T>을 제대로 구현했다면 아래 Test Cases에 나와있는 cases들의 빨간 밑줄이 사라질 것이다.

Get Return Type

 

문제 분석

타입스크립트 코드를 작성하다보면 경우에 따라 ReturnType<함수>를 종종 쓰는 경우가 있다.
목적은 말그대로 함수의 리턴 타입을 반환받고자하는 경우이다.
그동안 사용만 해보았지 제대로 구현해본적이 없다.

먼저 찬찬히 접근해보면 제너릭을 사용하고 있다.
타입스크립트 홈페이지에 나와있는 제너릭의 내용부터 다시 한번 환기할 필요가 있다.
TypeScript: Documentation - Generics (typescriptlang.org)

Documentation - Generics

결국 타입스크립트에 나와있는 제너릭의 핵심은 재사용가능한 타입이다.
어떤 타입이 들어오던 간에 사용할 수 있는 타입으로 만들고자 하는 것이다.

문제에서는 ReturnType이기 때문에 제너릭에 들어올 타입은 함수 타입이다.
근데 만일 다른 것들이 들어오면?
문제에 나와있지 않기 때문에 그냥 타입을 그대로 반환하거나 혹은 any로 반환하면 될 듯 하다.

함수의 기본 타입은 아래와 같이 생겼다.

type FunctionType = (...args: any) => any

함수의 파라미터의 갯수는 정해져있지 않기 때문에 (...args: any) 로 처리한다.

문제는 리턴 타입이다.
리턴 타입을 추론해야만한다.

이 때 사용하는 키워드가 바로 infer이다.

TypeScript: Documentation - Conditional Types (typescriptlang.org)

Documentation - Conditional Types

infer 키워드에 대한 설명

간략히 요약하자면 타입 추론을 할 때 사용할 수 있는 키워드이다.
타입스크립트 2.8 릴리즈 노트에 보면 리턴 타입의 추론 뿐만 아니라 다양하게 사용할 수 있는 것을 확인할 수 있다.

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html#type-inference-in-conditional-types

 

문제 해결

결과적으로 내가 만들어낸 정답은 아래와 같다.

type MyReturnType<T> = T extends (...args: any) => infer R ? R : T

함수 타입에서 리턴 타입이 추론되는 경우 리턴 타입을 반환하고 그렇지 않은 경우 그냥 제너릭 타입 그대로 반환하도록 했다.

빨간 밑줄이 사라졌다.

참고로 타입스크립트 유틸리티 타입에서는 아래와 같이 되어있다.

타입스크립트 유틸리티 타입 ReturnType

참고로 다른 유저들의 정답 중 recommended가 붙은 솔루션은 아래와 같다.