<div id="readability-page-1" class="page"><div><h3 id="1-currying">1. currying</h3>
<img src="https://velog.velcdn.com/images/dongha1992/post/36649e8f-adfa-440e-9a7a-06c314111d9d/image.png">
마지막 인자가 호출되어야 실행되는 커리함수가 있다. 커리함수의 타입은 어떻게 지정해야할까?
<img src="https://velog.velcdn.com/images/dongha1992/post/af538cfd-0451-4204-bf5b-cd49cca938b2/image.png">
지금은 <code>t</code>를 제외한 나머지 인자들은 <code>unknown</code>으로 추론되고 있다. 한번 수정해보자.
<h4 id="generic-attached-function-call">generic attached function call</h4>
<img src="https://velog.velcdn.com/images/dongha1992/post/d31a8364-9770-408b-a0a5-cab71dfc238b/image.png">
이미지에서 처럼 제네릭<code>U</code>, <code>V</code>는 첫 번째 인자를 바라보고 있다. 제네릭은 항상 function call에 물려있기 때문이다
<img src="https://velog.velcdn.com/images/dongha1992/post/cfcb528a-9dec-4597-981c-ef5874365511/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/c2a0a944-33eb-417f-8db1-931540f68847/image.png">
가령 <code>&lt;number, number, number&gt;</code> 을 추가해주면 정상 작동한다. 
하지만 제네릭 타입을 명시하게 되면 타입스크립트는 런타임에서 타입 추론을 하지 않는다. 그럼 제네릭을 사용하는 이유도 없어지는 것. 
<img src="https://velog.velcdn.com/images/dongha1992/post/5c758918-db74-4d23-8cb3-5797440ad675/image.png">
즉, 커링함수가 단계별로 각각 제네릭하게 타입을 추론해야하는 것이다. 
제네릭을 내부함수 각 호출부로 변경해주면
<img src="https://velog.velcdn.com/images/dongha1992/post/bb2ff75f-ed31-49d5-8799-4b939ef3d996/image.png">
첫번째 함수 (<code>T</code>) number로 추론
<img src="https://velog.velcdn.com/images/dongha1992/post/8f4fe3a9-159f-4a06-9a0a-da03ebc4d6b7/image.png">
두번째 함수 (<code>U</code>) number로 추론
<img src="https://velog.velcdn.com/images/dongha1992/post/76dceee8-ca72-4904-92f4-e449bd8ad899/image.png">
마지막 함수 (<code>V</code>)까지 number로 추론하게된다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/c3c4b51d-e901-4cba-a6a9-6d00acc598e2/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/a0298097-c787-45d3-a276-6c7020711fe5/image.png">
결과적으로 인자의 타입을 변경해도 유연하게 추론해준다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/65c62193-ec33-4213-b44d-d97b04eed039/image.png">
<h3 id="2-object">2. object</h3>
엄청 어려운 문제는 아닌데, 유니언, 키맵핑 개념이 확실하지 않아 헷갈렸던 문제다.
<img src="https://velog.velcdn.com/images/dongha1992/post/5448c20d-216f-4ff6-9874-d14f930d7ce1/image.png">
어디서나 볼 수 있는 <code>key</code>로 객체에서 <code>value</code>를 가져오는 함수다.
제네릭 <code>TObj</code>로 받고 key는 <code>keyof TObj</code>로 정했다.
<img src="https://velog.velcdn.com/images/dongha1992/post/ba8f7b30-a509-4987-b235-9e159a74701b/image.png">
함수를 호출해보면 
<img src="https://velog.velcdn.com/images/dongha1992/post/a8b6e0b2-3179-44a4-8a98-722e9401b022/image.png">
에러가 나온다 오잉?? 
<img src="https://velog.velcdn.com/images/dongha1992/post/a2398fcf-4d97-4a8b-b22e-81f59513e80c/image.png">
결과값이 유니언인 것!
즉, 함수<code>getValue</code> 에서 추론이 잘못되고 있다는 것인데, <code>obj</code> 에 다른 타입의 속성을 추가해보면
<img src="https://velog.velcdn.com/images/dongha1992/post/d07ec75f-b8ab-49e3-90e3-d4a3f390712e/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/119899cc-8d5b-46a4-b0d8-072d58cb7c91/image.png">
반환타입이 유니언으로 추가되어 나온다. 이런 사태를 방지해보자
<h4 id="constraint">constraint</h4>
<code>getValue</code>를 살펴보자
<img src="https://velog.velcdn.com/images/dongha1992/post/25407042-b8f9-43c2-942d-79cb056b2e91/image.png">
<code>key</code>가 유니언으로 infer되는 것을 확인할 수 있다.
<img src="https://velog.velcdn.com/images/dongha1992/post/c75afb73-0bff-45c6-86b1-2176e0438926/image.png">
이런 식으로 <code>key</code>가 타입 추론이 되어 있는 것이다. <code>key</code>의 타입을 <code>keyof TObj</code> 가 아닌 다른 방식으로 추론해줘야 한다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/65785672-8cea-4ebf-8ee2-2439824de24a/image.png">
깔끔하게 두번째 제네릭을 추가해준다. 그럼 컴파일 에러가 뜰 것이다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/8d227be7-d11e-4af2-8f96-7324a24fa87c/image.png">
이제 <code>TKey</code>에 constraint을 해준다.
<img src="https://velog.velcdn.com/images/dongha1992/post/a3768032-7f3a-4a52-bd72-2d72e803b48b/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/51ce5ac7-cb65-4a04-89a0-1a9935dba5f2/image.png">
멋진 추론
<img src="https://velog.velcdn.com/images/dongha1992/post/03b2cb51-6246-40fa-96ee-760608fda1fd/image.png">
테스트도 모두 통과다. 
<h3 id="3-partial-inference">3. partial inference</h3>
<img src="https://velog.velcdn.com/images/dongha1992/post/50fa7982-b64e-4535-a99f-964420911c6e/image.png">
<code>makeSelectors</code> 는 함수는 말그래도 셀렉터를 관리하는 함수다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/5b883169-90a7-455c-973d-d79ea1f9e0c8/image.png">
뭔가 타입을 제대로 한 거 같은데, 여기저기 에러가 나온다. 
<h4 id="문제">문제</h4>
<code>makeSelectors&lt;TSource, TSelectors&gt;()</code> 이렇게 두 제네릭한 인자를 넘길 때, 
첫 번째 타입 인자(<code>TSource</code>)는 명시적으로 넘기고, 두 번째 타입 인자(<code>TSelectors</code>)는 함수 인자(실제 값)로부터 추론받고 싶다.
하지만, 타입스크립트는 부분 추론을 지원하지 않는다. 
즉, <code>&lt;TSource, TSelectors&gt;</code> 모두 명시해야 하거나, 모두 추론에 맡겨야 한다.
<h4 id="currrying">currrying</h4>
이 문제는 커링으로 해결할 수 있다. 커링으로 타입 인자를 두 번에 나눠서 전달함으로써 추론을 유도하는 것이다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/66bee8a5-fc6c-45bd-b0b8-5517c2ce23c8/image.png">
화살표 함수를 추가하여 내부 함수를 한 번 더 반환하게 만들었다. 그리고 1번 문제에서 했던 것처럼 제네릭의 뎁스를 아래로 낮춰주면 된다.
<img src="https://velog.velcdn.com/images/dongha1992/post/147822dc-93be-426a-9382-bed9b89680b1/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/f444106e-8493-4063-afe6-50eef7dbff5c/image.png">
이렇게 되면 첫 번째 호출에서 타입 인자 명시만 하면 두 번째 호출에서 타입 추론이 된다.
참고 : <a href="https://www.totaltypescript.com/">total tyhpescript</a></div></div>

삶도 재입학이 되나요?

1. currying
마지막 인자가 호출되어야 실행되는 커리함수가 있다. 커리함수의 타입은 어떻게 지정해야할까?
지금은 t를 제외한 나머지 인자들은 unknown으로 추론되고 있다. 한번 수정해보자.
generic attached function call
이미지에서 처럼 제네릭U, V는 첫 번째 인자를 바라보고 있다. 제네릭은 항상 function call에 물려있기 때문이다
가령 <number, number, number> 을 추가해주면 정상 작동한다. 
하지만 제네릭 타입을 명시하게 되면 타입스크립트는 런타임에서 타입 추론을 하지 않는다. 그럼 제네릭을 사용하는 이유도 없어지는 것. 
즉, 커링함수가 단계별로 각각 제네릭하게 타입을 추론해야하는 것이다. 
제네릭을 내부함수 각 호출부로 변경해주면
첫번째 함수 (T) number로 추론
두번째 함수 (U) number로 추론
마지막 함수 (V)까지 number로 추론하게된다. 
결과적으로 인자의 타입을 변경해도 유연하게 추론해준다. 
2. object
엄청 어려운 문제는 아닌데, 유니언, 키맵핑 개념이 확실하지 않아 헷갈렸던 문제다.
어디서나 볼 수 있는 key로 객체에서 value를 가져오는 함수다.
제네릭 TObj로 받고 key는 keyof TObj로 정했다.
함수를 호출해보면 
에러가 나온다 오잉?? 
결과값이 유니언인 것!
즉, 함수getValue 에서 추론이 잘못되고 있다는 것인데, obj 에 다른 타입의 속성을 추가해보면
반환타입이 유니언으로 추가되어 나온다. 이런 사태를 방지해보자
constraint
getValue를 살펴보자
key가 유니언으로 infer되는 것을 확인할 수 있다.
이런 식으로 key가 타입 추론이 되어 있는 것이다. key의 타입을 keyof TObj 가 아닌 다른 방식으로 추론해줘야 한다. 
깔끔하게 두번째 제네릭을 추가해준다. 그럼 컴파일 에러가 뜰 것이다. 
이제 TKey에 constraint을 해준다.
멋진 추론
테스트도 모두 통과다. 
3. partial inference
makeSelectors 는 함수는 말그래도 셀렉터를 관리하는 함수다. 
뭔가 타입을 제대로 한 거 같은데, 여기저기 에러가 나온다. 
문제
makeSelectors<TSource, TSelectors>() 이렇게 두 제네릭한 인자를 넘길 때, 
첫 번째 타입 인자(TSource)는 명시적으로 넘기고, 두 번째 타입 인자(TSelectors)는 함수 인자(실제 값)로부터 추론받고 싶다.
하지만, 타입스크립트는 부분 추론을 지원하지 않는다. 
즉, <TSource, TSelectors> 모두 명시해야 하거나, 모두 추론에 맡겨야 한다.
currrying
이 문제는 커링으로 해결할 수 있다. 커링으로 타입 인자를 두 번에 나눠서 전달함으로써 추론을 유도하는 것이다. 
화살표 함수를 추가하여 내부 함수를 한 번 더 반환하게 만들었다. 그리고 1번 문제에서 했던 것처럼 제네릭의 뎁스를 아래로 낮춰주면 된다.
이렇게 되면 첫 번째 호출에서 타입 인자 명시만 하면 두 번째 호출에서 타입 추론이 된다.
참고 : total tyhpescript

Total Typescript - advanced generic

댓글