<div id="readability-page-1" class="page"><div><h3 id="1-use-data-hook">1. use-data-hook</h3>
<img src="https://velog.velcdn.com/images/dongha1992/post/e6efce0f-8c7a-4c08-a634-879fdbbe679e/image.png">
<code>useData</code>라는 데이터 페칭 함수가 있다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/5a4d3a20-0fa4-4e89-a451-b87ab8c2d4fa/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/52eb5804-2c4f-4d8c-8fbd-8a7fc47861c7/image.png">
<code>getData</code>를 반환하여 페칭한 값을 가져오는데 
<img src="https://velog.velcdn.com/images/dongha1992/post/0520c647-e4d8-487b-863c-5f9ed5dc8c62/image.png">
<code>inititalData</code>를 넘긴 경우는 초기값이 있는데도 <code>inititalData</code>가 옵셔널이기 때문에 <code>number | undefined</code>로 추론된다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/b92e8ec4-42b2-493c-bc27-d7c93e11be75/image.png">
이 문제를 해결하기 위해서 함수 오버로드가 필요하다.
<h4 id="function-overload">function overload</h4>
 <img src="https://velog.velcdn.com/images/dongha1992/post/032e01ef-4bfc-47c0-bc0b-71d3c647fee4/image.png">
반환값 <code>getData</code>가 <code>T | undefined</code>이기 때문인데 함수 오버로드를 해주자
<img src="https://velog.velcdn.com/images/dongha1992/post/34b3fba8-ddb8-4853-91f8-6b063ccbfe8e/image.png">
첫 번째 오버로드는 <code>inititalData</code>가 없는 경우다. <code>inititalData</code>가 없으면 <code>getData</code>는 <code>T | undefined</code>를 반환한다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/e3c9264d-209e-45e9-acf0-92d495690bba/image.png">
두 번째 오버로드는 <code>inititalData</code>가 있는 경우다. 이 경우 <code>getData</code>는 <code>T</code>만 반환한다. 
이렇게 오버로드를 추가해주고 다시 <code>inititalData</code>가 있었던 경우를 보면 제대로 추론하고 있음을 확인할 수 있다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/f5054636-e925-4aea-8562-0f7c142677a0/image.png">
이러한 패턴은 복수개의 call signature를 가진 함수의 타입을 제어할 때 용이하다. 예를들어<code>useQuery</code>에서도 이런 패턴이 적용되었다 <a href="https://github.com/TanStack/query/pull/3834">(실제 react-query에서 적용된 pr)</a>
<h3 id="2-instantiated-with-subtype">2. instantiated with subtype</h3>
<img src="https://velog.velcdn.com/images/dongha1992/post/a3b97c3e-5d34-4c0e-b4e3-04de6e78e113/image.png">
이런 <code>obj</code>가 있다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/7ea0398b-a4b9-4286-983b-f54eed0811f7/image.png">
<code>ObjKey</code>는 키만 추출한 타입이다.
<img src="https://velog.velcdn.com/images/dongha1992/post/c83713f6-da7b-4eaa-94ef-2235fcca6157/image.png">
그리고 <code>getValue</code>가 있다. <code>getValue</code>에서 <code>TKey</code>를 <code>extends ObjKey</code>하였다. 하지만 보는 것처럼 기본값에서 무언가 문제가 생긴다.
<img src="https://velog.velcdn.com/images/dongha1992/post/26a15afe-f126-4469-bb57-e0dfac44175f/image.png">
기본값 테스트만 통과하지 못하는 상황. 
<img src="https://velog.velcdn.com/images/dongha1992/post/5d8c45de-d85c-46c1-9c0b-4cbe069324c2/image.png">
한편 기본값으로 지정한 타입에선 이런 에러가 나온다. 문제를 해결해보자
<h4 id="제네릭의-한계">제네릭의 한계</h4>
에러의 원인은 제네릭 기본값 한계때문이다. <code>TKey</code>는 <code>'a' | 'b' | 'c'</code>의 서브타입이 될 수 있다. 즉, <code>TKey</code> 가 <code>'b'</code>(혹은 'c')로 추론되면 <code>"a"</code>는 타입이 깨진다. 
즉, 기본값 <code>"a"</code>가 모든 가능한 <code>TKey</code> 서브타입을 만족하지 못한 것이다.
<h4 id="또다시-함수-오버로드">또다시 함수 오버로드</h4>
이런 상황을 함수 오버로드로 해결할 수 있다. 인자가 들어온 경우를 먼저 추가해주고
<img src="https://velog.velcdn.com/images/dongha1992/post/933cd04c-6296-4231-a088-64892cd91eb8/image.png">
인자가 없이 기본값으로 하는 경우를 추가해준다.
<img src="https://velog.velcdn.com/images/dongha1992/post/0a67c64c-da20-4d35-8bde-764a9695f96b/image.png">
그리고 반환값에 기본값인 "a"로 인덱싱해준다.
<img src="https://velog.velcdn.com/images/dongha1992/post/2181234d-8f08-46dd-a21f-d7e2d1221def/image.png">
이렇게 두 가지 케이스를 먼저 작성하고 기존에 있던 함수를 수정해준다.
<img src="https://velog.velcdn.com/images/dongha1992/post/ce8a0ee1-ff76-4b83-b44b-906761718e6f/image.png">
먼저, 제네릭한 파트는 오버로딩한 함수에서 처리하고 있으니 제네릭을 제거한다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/5193f704-7b2c-41dd-8e59-e74460031f13/image.png">
구현 시그니처와 호환되지 않는다는 에러가 나온다. 기본값을 추가해서 호환하게 해주면된다.
<img src="https://velog.velcdn.com/images/dongha1992/post/ef8b11c4-e0b7-408f-ab1e-1834acb6d426/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/6617f3f2-aeae-42d2-aa33-702553023b75/image.png">
<code>ObjKey</code>에 기본값 <code>'a'</code>를 추가했다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/857af8ee-3074-4b2f-bb61-c964843f3c35/image.png">
테스트 모두 통과!
<img src="https://velog.velcdn.com/images/dongha1992/post/ef8f85bc-b0ff-44d3-94bb-a18493c7e107/image.png">
인자가 없을 경우, 기본값으로 오버로드된 타입을 타고
<img src="https://velog.velcdn.com/images/dongha1992/post/91e8412c-780f-455f-9e22-54f08ac8da0a/image.png">
인자가 있다면, 제네릭으로 오버로드된 타입을 타게된다. 
참고 : <a href="https://www.totaltypescript.com/">total typescript</a></div></div>

삶도 재입학이 되나요?

1. use-data-hook
useData라는 데이터 페칭 함수가 있다. 
getData를 반환하여 페칭한 값을 가져오는데 
inititalData를 넘긴 경우는 초기값이 있는데도 inititalData가 옵셔널이기 때문에 number | undefined로 추론된다. 
이 문제를 해결하기 위해서 함수 오버로드가 필요하다.
function overload
 
반환값 getData가 T | undefined이기 때문인데 함수 오버로드를 해주자
첫 번째 오버로드는 inititalData가 없는 경우다. inititalData가 없으면 getData는 T | undefined를 반환한다. 
두 번째 오버로드는 inititalData가 있는 경우다. 이 경우 getData는 T만 반환한다. 
이렇게 오버로드를 추가해주고 다시 inititalData가 있었던 경우를 보면 제대로 추론하고 있음을 확인할 수 있다. 
이러한 패턴은 복수개의 call signature를 가진 함수의 타입을 제어할 때 용이하다. 예를들어useQuery에서도 이런 패턴이 적용되었다 (실제 react-query에서 적용된 pr)
2. instantiated with subtype
이런 obj가 있다. 
ObjKey는 키만 추출한 타입이다.
그리고 getValue가 있다. getValue에서 TKey를 extends ObjKey하였다. 하지만 보는 것처럼 기본값에서 무언가 문제가 생긴다.
기본값 테스트만 통과하지 못하는 상황. 
한편 기본값으로 지정한 타입에선 이런 에러가 나온다. 문제를 해결해보자
제네릭의 한계
에러의 원인은 제네릭 기본값 한계때문이다. TKey는 'a' | 'b' | 'c'의 서브타입이 될 수 있다. 즉, TKey 가 'b'(혹은 'c')로 추론되면 "a"는 타입이 깨진다. 
즉, 기본값 "a"가 모든 가능한 TKey 서브타입을 만족하지 못한 것이다.
또다시 함수 오버로드
이런 상황을 함수 오버로드로 해결할 수 있다. 인자가 들어온 경우를 먼저 추가해주고
인자가 없이 기본값으로 하는 경우를 추가해준다.
그리고 반환값에 기본값인 "a"로 인덱싱해준다.
이렇게 두 가지 케이스를 먼저 작성하고 기존에 있던 함수를 수정해준다.
먼저, 제네릭한 파트는 오버로딩한 함수에서 처리하고 있으니 제네릭을 제거한다. 
구현 시그니처와 호환되지 않는다는 에러가 나온다. 기본값을 추가해서 호환하게 해주면된다.
ObjKey에 기본값 'a'를 추가했다. 
테스트 모두 통과!
인자가 없을 경우, 기본값으로 오버로드된 타입을 타고
인자가 있다면, 제네릭으로 오버로드된 타입을 타게된다. 
참고 : total typescript

Total Typescript - function overload

댓글