<div id="readability-page-1" class="page"><div><h3 id="제네릭-마지막-문제">제네릭 마지막 문제...</h3>
<img src="https://velog.velcdn.com/images/dongha1992/post/c07908b4-11f8-437b-8de5-750b6087ca14/image.png">
<code>translations</code>라는 데이터가 있다.
<img src="https://velog.velcdn.com/images/dongha1992/post/a7296608-5044-428e-9cc7-cb30030ea656/image.png">
 이 데이터는 <code>translate</code> 라는 함수를 통해 변환된다. <code>translate</code>는 무엇인가
<img src="https://velog.velcdn.com/images/dongha1992/post/23600339-b94e-4902-8aa6-9b7c965d9cc4/image.png">
키 인덱싱으로 <code>translations</code> 의 밸류를 가져오는데, 여기서 봐야할 점은 <code>...args</code>로 들어오는 동적인 값을 replace로 매핑하여 반환한다.
<img src="https://velog.velcdn.com/images/dongha1992/post/0132e24c-e036-4143-8096-4bb299c47b4f/image.png">
가령, <code>{ count : "2" }</code>를 넘기면 아래와 같이 출력해야 한다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/d885be85-745d-47e5-92dc-ca3439c9fb97/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/c07908b4-11f8-437b-8de5-750b6087ca14/image.png">
<code>...args</code>는 옵셔널하지만, <code>...args</code>가 필수값인 <code>translations</code> 데이터도 있다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/8f030278-2a95-41a1-8ba7-0810f240a164/image.png">
<code>title</code>의 경우, 세 번째 인자가 필수값으로 필요하다. 타입을 제대로 지정하지 않으면 컴파일 에러 없이 undefiend를 뱉는다.
<img src="https://velog.velcdn.com/images/dongha1992/post/911518fe-94fd-4fc1-b210-4bb4b601a82e/image.png">
이 복잡해보이는 녀석의 타입을 정해보자!
<img src="https://velog.velcdn.com/images/dongha1992/post/c683126b-088f-4d00-9439-47f7378ded8b/image.png">
<h4 id="스텝-바이-스텝">스텝 바이 스텝</h4>
먼저 <code>translations</code>의 제네릭을 정해보자. 객체니까 <code>Record</code>로 해둔다.
<img src="https://velog.velcdn.com/images/dongha1992/post/a53de2c2-bfa8-45e9-88c3-eb45f859d240/image.png">
다음은 <code>key</code>다. <code>key</code>는 <code>keyof</code>로 방금 만든 <code>TTranslations</code>의 key다.
<img src="https://velog.velcdn.com/images/dongha1992/post/12c3e2df-28c5-4119-8005-5fd380f80e9e/image.png">
<code>...args</code>의 경우 key에 따라 필수인지 옵셔널인지 정해지기고, 밸류에 <code>{}</code> 다이나믹한 밸류가 포함되었는지 따라 다른 타입을 줘야 하기 때문에 지금 인자로 들어오는 키가 어떤 값인지 알아야 한다(마치 런타임에서처럼)
<img src="https://velog.velcdn.com/images/dongha1992/post/5d7da230-cb4a-4d2d-88e6-9d1abf134fc0/image.png">
<code>TTarget</code> 이란 제네릭을 만들고 확인해보면
<img src="https://velog.velcdn.com/images/dongha1992/post/f50a2d80-7c0e-4373-afd1-70d36e8eb5ff/image.png">
<code>TTarget</code>로 <code>button</code>의 밸류인 <code>Click me!</code>가 캡쳐되는 것을 확인할 수 있다.
<h4 id="getparamkeys">GetParamKeys</h4>
자, 이제 infer를 사용해야 하여 string중에 <code>{somethingKey}</code>에 포함된 key를 찾아내야 한다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/be802262-80b3-45aa-ac3d-16373e92011f/image.png">
<code>{${infer Param}}</code>으로 <code>{}</code> 안에 밸류를 infer로 지정하고, <code>{}</code>가 여러개 나올 수도 있으니 나머지 부분도 infer로 떼어내 재귀를 돈다.
<img src="https://velog.velcdn.com/images/dongha1992/post/057446b1-56f1-4db1-9e8c-6a21935bce86/image.png">
이제 <code>GetParamKeys</code>를 테스트 해보면
<img src="https://velog.velcdn.com/images/dongha1992/post/4e6cc126-d731-448c-87c0-5d4d7c2945cc/image.png">
<code>title</code>의 경우 <code>name</code>만 잘 추출이 되고
<img src="https://velog.velcdn.com/images/dongha1992/post/3fa665cd-f1dd-47c5-a8a2-30e38a76934f/image.png">
<code>button</code>일 경우(<code>{}</code>가 없을 때)는 빈 값으로 잘 추출된다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/6ff3792b-4b09-426c-a740-6050264b1243/image.png">
복수개일 때도 정확히 추론한다.
<h4 id="getparamkeysasunion">GetParamKeysAsUnion</h4>
<code>GetParamKeys</code>의 반환값은 튜플이므로 유니언으로 만들어줘야 한다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/fac49ed2-c82d-42bc-aa8d-3cb0681fc7f0/image.png">
그럼, 원래 작성중이었던 <code>TTarget</code>에 기본값으로 넣어준다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/be55a8ca-8d64-4048-b50d-52349b95e1f6/image.png">
<h4 id="args">...args</h4>
이제 대망의 <code>...args</code>를 처리해보자. 생각보다 간단하다<code>TTarget</code>이 있으면 (string의 서브타입이면) <code>Record&lt;TTarget, string&gt;</code> 아니면 <code>[]</code>이다. 
<code>...args</code>의 타입까지 다 정해서 전체코드를 확인해보자
<h4 id="전체코드">전체코드</h4>
<img src="https://velog.velcdn.com/images/dongha1992/post/ab4e2eae-231e-439f-9f3d-6c83d147eeee/image.png">
이제 테스트를 해보면 <code>args</code>가 없어도 되는 key인 경우 <code>never</code> 타입으로 떨어져 에러가 발생하고
<img src="https://velog.velcdn.com/images/dongha1992/post/3ffa8843-2a55-4d71-8dc6-c1a1bc7eaa86/image.png">
<code>args</code>가 있는 경우는 정삭 동작한다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/37a11f11-0bcb-4d79-9380-4a728509e673/image.png">
<code>args</code>가 있어야 하는데 없는 경우도 에러가 발생하고
<img src="https://velog.velcdn.com/images/dongha1992/post/857e0d0c-0195-403c-bf78-a2163c47010c/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/07b2340a-af86-4b43-bf0a-ad980a5029cd/image.png">
자동완성까지 깔끔하게 된다. 
참고 : <a href="https://www.totaltypescript.com/">total typescript</a></div></div>

삶도 재입학이 되나요?

제네릭 마지막 문제...
translations라는 데이터가 있다.
 이 데이터는 translate 라는 함수를 통해 변환된다. translate는 무엇인가
키 인덱싱으로 translations 의 밸류를 가져오는데, 여기서 봐야할 점은 ...args로 들어오는 동적인 값을 replace로 매핑하여 반환한다.
가령, { count : "2" }를 넘기면 아래와 같이 출력해야 한다. 
...args는 옵셔널하지만, ...args가 필수값인 translations 데이터도 있다. 
title의 경우, 세 번째 인자가 필수값으로 필요하다. 타입을 제대로 지정하지 않으면 컴파일 에러 없이 undefiend를 뱉는다.
이 복잡해보이는 녀석의 타입을 정해보자!
스텝 바이 스텝
먼저 translations의 제네릭을 정해보자. 객체니까 Record로 해둔다.
다음은 key다. key는 keyof로 방금 만든 TTranslations의 key다.
...args의 경우 key에 따라 필수인지 옵셔널인지 정해지기고, 밸류에 {} 다이나믹한 밸류가 포함되었는지 따라 다른 타입을 줘야 하기 때문에 지금 인자로 들어오는 키가 어떤 값인지 알아야 한다(마치 런타임에서처럼)
TTarget 이란 제네릭을 만들고 확인해보면
TTarget로 button의 밸류인 Click me!가 캡쳐되는 것을 확인할 수 있다.
GetParamKeys
자, 이제 infer를 사용해야 하여 string중에 {somethingKey}에 포함된 key를 찾아내야 한다. 
{${infer Param}}으로 {} 안에 밸류를 infer로 지정하고, {}가 여러개 나올 수도 있으니 나머지 부분도 infer로 떼어내 재귀를 돈다.
이제 GetParamKeys를 테스트 해보면
title의 경우 name만 잘 추출이 되고
button일 경우({}가 없을 때)는 빈 값으로 잘 추출된다. 
복수개일 때도 정확히 추론한다.
GetParamKeysAsUnion
GetParamKeys의 반환값은 튜플이므로 유니언으로 만들어줘야 한다. 
그럼, 원래 작성중이었던 TTarget에 기본값으로 넣어준다. 
...args
이제 대망의 ...args를 처리해보자. 생각보다 간단하다TTarget이 있으면 (string의 서브타입이면) Record<TTarget, string> 아니면 []이다. 
...args의 타입까지 다 정해서 전체코드를 확인해보자
전체코드
이제 테스트를 해보면 args가 없어도 되는 key인 경우 never 타입으로 떨어져 에러가 발생하고
args가 있는 경우는 정삭 동작한다. 
args가 있어야 하는데 없는 경우도 에러가 발생하고
자동완성까지 깔끔하게 된다. 
참고 : total typescript

Total Typescript - generic challenge

댓글