<div id="readability-page-1" class="page"><div><h3 id="1-infer-basic">1. infer basic</h3>
infer는 타입스크립트의 조건부 타입(Conditional Types)과 함께 사용되어 특정 타입을 추론할 수 있는 기능을 가진다.
평소에 infer만 보면 쫄았는데, infer가 무엇인지 확실히 알아보자.
<h4 id="문제">문제</h4>
<img src="https://velog.velcdn.com/images/dongha1992/post/4f668ed6-2424-4134-8b4d-1e4b1bac6f5d/image.png">
이런 귀여운 녀석이 있다. <code>GetDatValue</code>는 말그대로 <code>data</code> 하위 객체 정보를 타입으로 가져오는 역할을 한다.
<img src="https://velog.velcdn.com/images/dongha1992/post/650d3478-abf5-43e3-8fb9-ba4c133c7768/image.png">
예를들어 <code>{data: "hello"}</code> 일때, 추출된 타입이<code>"hello"</code>를 충족시키고 싶다. 그럼 테스트를 만족시키면서 타입을 정해보자
<h4 id="해결">해결</h4>
<img src="https://velog.velcdn.com/images/dongha1992/post/b9fcd79e-6431-452d-8e32-e9d0d46208df/image.png">
가장 간단하게는 <code>extends</code>를 사용하여 <code>{ data : any}</code> 를 확인하는 방법이 있을 수 있다. 
이것도 좋지만 여기서 <code>infer</code>를 사용하면 좀 더 명확해진다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/2e09618d-ac64-4895-8d59-0461ee3d481c/image.png">
<code>infer</code>로 추론되는 <code>TData</code>는 조건식 스코프에서만 작동한다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/0ca561f4-c92b-49f2-83f6-b97241162e7f/image.png">
가령 삼항식에 false 부분에 <code>TData</code> 를 두면 스코프 에러가 나온다. 
<h3 id="infer-with-interface">infer with interface</h3>
<img src="https://velog.velcdn.com/images/dongha1992/post/0a12ac9b-d2ab-4273-967e-946a2200f368/image.png">
<code>interface</code>를 사용하는 경우에서 <code>infer</code>를 알아보자.
다음과 같은 <code>MyComplexInterface</code> 라는 인터페이스가 있다. 
위와 같은 상황에서 <code>getPoint</code>의 타입만 추출하고 싶다면 어떻게 해야할까?
<img src="https://velog.velcdn.com/images/dongha1992/post/8a1800c8-e5fb-421d-9fff-3b189953e77c/image.png">
<h4 id="해결-1">해결</h4>
<code>GetPoint</code>를 손봐보도록하자.
<img src="https://velog.velcdn.com/images/dongha1992/post/968bd236-f8f3-4894-ad22-aa637e978b64/image.png">
먼저 <code>MyComplexInterface</code>를 extends하여 조건부로 만든다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/1f8e557d-4dea-4b79-ba22-3c33129ef310/image.png">
<code>any</code>로 추론되고 있다. 4번째 <code>{x: 12, y: 14}</code>를 추론하고 싶으니 무언가를 해줘야 한다.
<img src="https://velog.velcdn.com/images/dongha1992/post/973804bf-e008-4331-82c9-39b66f62273b/image.png">
<code>ReturnType</code>과 인덱스 타입을 적용하면 
<img src="https://velog.velcdn.com/images/dongha1992/post/8fb48d52-79f7-4877-ae9f-58c6c9816f24/image.png">
원하는 타입을 추론할 수 있다. 
하지만, 이것으로는 부족하다. <code>infer</code>를 사용하여 제네릭하게 변경해보자.
<img src="https://velog.velcdn.com/images/dongha1992/post/c6449c5a-0df6-49e2-8a00-d53d909b8b56/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/edef7a8f-8d07-4341-9817-31f0dc18ea34/image.png">
아주 추론이 잘 되고 있다. 
<h3 id="2-infer-advanced">2. infer advanced</h3>
<h4 id="infer-with-template-literal">infer with template literal</h4>
<code>infer</code>로 어디까지 할 수 있는지 보자..
<img src="https://velog.velcdn.com/images/dongha1992/post/a3b63c5b-9c73-406b-97e9-9b4f704173ad/image.png">
tuple 형태의 <code>Names</code>와 성만 추출하는 <code>GetSurname</code>이라는 타입이 있다.
<img src="https://velog.velcdn.com/images/dongha1992/post/2e7a7922-85c1-4d1a-9c0b-aa76b9f0c96e/image.png">
<code>GetSurname</code> 통해서 성만 추출하는 타입을 작성해보자.
<img src="https://velog.velcdn.com/images/dongha1992/post/4c215a81-9d10-45af-9bc1-a1598a772671/image.png">
일단 조건식은 대략 이럴 것이다. 이제 <code>"이름 성"</code> 으로 이루어져있는지 확인을 하고 그렇다면 성을 반환하도록하면 된다.
여기서 <code>template literal</code>과 <code>infer</code>가 쓰인다.
<img src="https://velog.velcdn.com/images/dongha1992/post/d84a89f9-30e0-4633-86e4-9a2bca9aeacf/image.png">
<code>${infer First} ${infer Last}</code> 이부분을 template literal로 형태를 잡아주고 infer로 추론하는 것이다
<img src="https://velog.velcdn.com/images/dongha1992/post/3621ead7-7f98-4095-9e13-bdbaa081d8f2/image.png">
모든 테스트가 다 통과된다. 
(아니 infer로 이거까지 한다고...? )
<h4 id="infer-return-type">infer return type</h4>
그럼 이제 좀 더 실무적인 예제를 보자.
<img src="https://velog.velcdn.com/images/dongha1992/post/d6d4fbed-12fa-4e0b-92c0-49a7ea59efba/image.png">
서버사이드에서 호출하는 api가 있다고 가정하자.
<img src="https://velog.velcdn.com/images/dongha1992/post/11406b95-b2f3-40a7-8e4c-900f5139c835/image.png">
이제 <code>InferPropsFromServerSideFunction</code>을 통해 함수의 <code>props</code> 리턴 타입을 추출해보자.
<img src="https://velog.velcdn.com/images/dongha1992/post/f3056b7c-e721-46ee-ab76-14c63a0700c7/image.png">
처음엔 이런 형태로 작성할 수 있을 것이다. <code>() =&gt; Promise&lt;any&gt;</code>로 확장하여 <code>any</code> 를 반환한다. 
이제 여기에 <code>props</code>를 infer 한다.
<img src="https://velog.velcdn.com/images/dongha1992/post/2d3060cf-404c-4698-9e80-d7f4361d33aa/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/343c0f7d-3c2a-41d6-b692-7db7b6e79d95/image.png">
테스트 통과했다
<h4 id="infer-in-union">infer in union</h4>
갈 때까지 간 infer의 마지막 예제다
<img src="https://velog.velcdn.com/images/dongha1992/post/135ad2e2-1171-443c-8222-99b739b8b960/image.png">
다양한 형태의 파싱 함수가 있다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/b4b65f76-4e9e-4f82-9787-1358901f434d/image.png">
<code>GetParserResult</code>라는 하나의 유틸 함수를 사용하여 각 함수의 리턴값을 추출하는 것
<img src="https://velog.velcdn.com/images/dongha1992/post/9dfcd97e-6c80-4ca2-95ac-461f9f2e7bd5/image.png">
먼저 노가다와 삼항으로 이렇게 작성할 수 있겠다. 모든 경우를 조건부에 적용시켰다. 
하지만 가독성이 매우 떨어진다. 이것을 조금 이쁘게 리팩토링해보자. 이때 <code>union</code>을 활용하면 된다.
<img src="https://velog.velcdn.com/images/dongha1992/post/36f6c558-739e-4bdc-8038-5b8ddd3c3dc0/image.png">
3가지 타입 형태를 유니언으로 두고, 삼항을 사용하여 infer한 것
<img src="https://velog.velcdn.com/images/dongha1992/post/5dd27809-287d-4e3d-b0df-de99c7ea6d74/image.png">
테스트는 모두 통과된다!
<h4 id="infer-in-distributive-union">infer in distributive union</h4>
이제 마지막이다!! infer 정말 많이 쓰이는구나
<img src="https://velog.velcdn.com/images/dongha1992/post/01fe2044-7f9a-480f-9847-7b5c52bb9445/image.png">
<code>Fruit</code> 이라는 유니언 타입이 있다. 
여기서 특정 타입만 골라서 새로운 타입을 만들고 싶을 때면 어떻게 하면 될까?
참고 : <a href="https://www.totaltypescript.com/">total typescript</a></div></div>

삶도 재입학이 되나요?

1. infer basic
infer는 타입스크립트의 조건부 타입(Conditional Types)과 함께 사용되어 특정 타입을 추론할 수 있는 기능을 가진다.
평소에 infer만 보면 쫄았는데, infer가 무엇인지 확실히 알아보자.
문제
이런 귀여운 녀석이 있다. GetDatValue는 말그대로 data 하위 객체 정보를 타입으로 가져오는 역할을 한다.
예를들어 {data: "hello"} 일때, 추출된 타입이"hello"를 충족시키고 싶다. 그럼 테스트를 만족시키면서 타입을 정해보자
해결
가장 간단하게는 extends를 사용하여 { data : any} 를 확인하는 방법이 있을 수 있다. 
이것도 좋지만 여기서 infer를 사용하면 좀 더 명확해진다. 
infer로 추론되는 TData는 조건식 스코프에서만 작동한다. 
가령 삼항식에 false 부분에 TData 를 두면 스코프 에러가 나온다. 
infer with interface
interface를 사용하는 경우에서 infer를 알아보자.
다음과 같은 MyComplexInterface 라는 인터페이스가 있다. 
위와 같은 상황에서 getPoint의 타입만 추출하고 싶다면 어떻게 해야할까?
해결
GetPoint를 손봐보도록하자.
먼저 MyComplexInterface를 extends하여 조건부로 만든다. 
any로 추론되고 있다. 4번째 {x: 12, y: 14}를 추론하고 싶으니 무언가를 해줘야 한다.
ReturnType과 인덱스 타입을 적용하면 
원하는 타입을 추론할 수 있다. 
하지만, 이것으로는 부족하다. infer를 사용하여 제네릭하게 변경해보자.
아주 추론이 잘 되고 있다. 
2. infer advanced
infer with template literal
infer로 어디까지 할 수 있는지 보자..
tuple 형태의 Names와 성만 추출하는 GetSurname이라는 타입이 있다.
GetSurname 통해서 성만 추출하는 타입을 작성해보자.
일단 조건식은 대략 이럴 것이다. 이제 "이름 성" 으로 이루어져있는지 확인을 하고 그렇다면 성을 반환하도록하면 된다.
여기서 template literal과 infer가 쓰인다.
${infer First} ${infer Last} 이부분을 template literal로 형태를 잡아주고 infer로 추론하는 것이다
모든 테스트가 다 통과된다. 
(_아니 infer로 이거까지 한다고...? _)
infer return type
그럼 이제 좀 더 실무적인 예제를 보자.
서버사이드에서 호출하는 api가 있다고 가정하자.
이제 InferPropsFromServerSideFunction을 통해 함수의 props 리턴 타입을 추출해보자.
처음엔 이런 형태로 작성할 수 있을 것이다. () => Promise<any>로 확장하여 any 를 반환한다. 
이제 여기에 props를 infer 한다.
테스트 통과했다
infer in union
갈 때까지 간 infer의 마지막 예제다
다양한 형태의 파싱 함수가 있다. 
GetParserResult라는 하나의 유틸 함수를 사용하여 각 함수의 리턴값을 추출하는 것
먼저 노가다와 삼항으로 이렇게 작성할 수 있겠다. 모든 경우를 조건부에 적용시켰다. 
하지만 가독성이 매우 떨어진다. 이것을 조금 이쁘게 리팩토링해보자. 이때 union을 활용하면 된다.
3가지 타입 형태를 유니언으로 두고, 삼항을 사용하여 infer한 것
테스트는 모두 통과된다!
infer in distributive union
이제 마지막이다!! infer 정말 많이 쓰이는구나
Fruit 이라는 유니언 타입이 있다. 
여기서 특정 타입만 골라서 새로운 타입을 만들고 싶을 때면 어떻게 하면 될까?
참고 : total typescript

Total Typescript - infer

댓글