<div id="readability-page-1" class="page"><div><h3 id="1-never-in-key-mapping">1. never in key mapping</h3>
<img src="https://velog.velcdn.com/images/dongha1992/post/2035aeb9-d3ed-4969-8c4c-0d5f52dac6f6/image.png">
말그대로 <code>OnlyIdKeys</code> id 관련 키만 추출하는 타입을 작성해본다 가정하자.
<img src="https://velog.velcdn.com/images/dongha1992/post/f09aa756-41ca-4c26-97bc-2f03f6b87475/image.png">
이렇게 키를 순회하는 타입의 기본적인 형태로 일단 만든다.
<img src="https://velog.velcdn.com/images/dongha1992/post/54689fa7-dba3-43af-940f-f50e7fe79fea/image.png">
이제 여기서 <code>id</code>와 관련된 키만 추출해야한다. 가장 먼저 템플릿 리터럴을 떠올릴 수 있다.
<img src="https://velog.velcdn.com/images/dongha1992/post/3fa64d90-1ad7-4a71-8a6c-9a7650fb18f7/image.png">
regex 비슷하게 앞뒤로 string를 두고 id가 될 수 있는 템플릿 리터럴를 만든다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/948fa294-ba82-4133-a4d0-f80b44048f01/image.png">
잘 작동한다. 그럼 <code>[K in keyof T]</code>에 <code>SearchForId</code>를 <code>extends</code>로 넣어줘야 한다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/1c030d1e-0c5b-4d8d-a181-1e67460329bd/image.png">
이젠 되지 않았을까 생각했는데, "?"를 까먹었냐는 친절한 에러가 나온다!
extends에 <code>SearchForId</code>에 속할 경우, <code>K</code>를 아니면 <code>never</code>를 반환해야 한다.
<img src="https://velog.velcdn.com/images/dongha1992/post/c10bde0c-26e0-4a1f-86ad-12b90de306e1/image.png"> 
(이정도로까지 해야하나 타입..?)
<img src="https://velog.velcdn.com/images/dongha1992/post/5ef958de-5a00-4ce8-bd07-bb94fc460e3b/image.png">
그럼 id 관련 키만 잘 추출될 것을 확인할 수 있다. 
<h3 id="2-discriminated-union">2. discriminated union</h3>
좋다... key로 갈 때까지 가보자...
<img src="https://velog.velcdn.com/images/dongha1992/post/f0d749cd-57bf-4800-97d2-105e69c604c4/image.png">
<code>route, search</code>를 키로 갖는 객체를 유니언으로 정한 <code>Route</code>라는 타입이 있다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/dfcb2684-1d06-40ac-93d7-e47aa6887e28/image.png">
유니언으로 되어 있는 <code>Route</code>이 타입의 value를 key로 갖는 하나의 합쳐진 타입 형태로 추출하려고 한다. 스텝 바이 스텝으로 가보자!
<h4 id="mapping">mapping</h4>
일단 그냥 키 맵핑을 해서 value가 key가 될 수 있도록 한다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/cb39a8b4-f2ee-4680-902c-c5261a5a045a/image.png">
<code>route</code>만 맵핑하면
<img src="https://velog.velcdn.com/images/dongha1992/post/3e5a837d-a701-49ef-90f2-b763cbb6dc6e/image.png">
이렇게 된다. 이제 각 value는 <code>search</code>의 value를 가져와야 한다. 
여기에 사용할 수 있는 아주 적절한 <code>Extract</code>라는 녀석을 사용해보자
<img src="https://velog.velcdn.com/images/dongha1992/post/e0696a85-fbd2-491f-a09a-961c9c99e8c3/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/a013264b-12c6-4052-a72b-a0475e5146ae/image.png">
<code>Extract</code>는 js 메서드로 치면 find 같은 녀석이다. 이 녀석을 제네릭으로 바꿔서 <code>search</code>의 밸류를 가져와보자. 
<img src="https://velog.velcdn.com/images/dongha1992/post/4aae3ba4-b1fe-4ee4-9c37-e71022ce7d0e/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/d18fbb3f-385e-40b4-b4e1-290b59dc3e41/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/e978dc24-af1e-4cd6-8cdc-c9bbb8417e59/image.png">
아주 완벽하게 가져오는 것을 확인할 수 있다. 
<h4 id="더-쉬운-방법">더 쉬운 방법</h4>
사실 <code>as</code>를 사용한 더 쉬운 방법이 있다.
<img src="https://velog.velcdn.com/images/dongha1992/post/8f75b583-ad53-42d6-91da-6954d00efe2d/image.png"> 
(여기부터 살짝 머리가 안 돌아간다)
<ol>
<li><code>[R in Route]:</code>은 <code>Route</code> 유니온 타입의 각 객체를 순회한다. </li>
<li><code>as R["route"]</code>를 통해 각 객체의 route 값을 새 키로 사용한다.</li>
</ol>
이제 위와 동일하게 <code>search</code>도 해주면 된다.
<img src="https://velog.velcdn.com/images/dongha1992/post/22f13ea6-09fb-4689-990b-db43dff24ff6/image.png">
아주 깔끔하게 완성이다. 
<h3 id="3-discriminated-union">3. discriminated union</h3>
참고 : <a href="https://www.totaltypescript.com/">total typescript</a></div></div>

삶도 재입학이 되나요?

1. never in key mapping
말그대로 OnlyIdKeys id 관련 키만 추출하는 타입을 작성해본다 가정하자.
이렇게 키를 순회하는 타입의 기본적인 형태로 일단 만든다.
이제 여기서 id와 관련된 키만 추출해야한다. 가장 먼저 템플릿 리터럴을 떠올릴 수 있다.
regex 비슷하게 앞뒤로 string를 두고 id가 될 수 있는 템플릿 리터럴를 만든다. 
잘 작동한다. 그럼 [K in keyof T]에 SearchForId를 extends로 넣어줘야 한다. 
이젠 되지 않았을까 생각했는데, "?"를 까먹었냐는 친절한 에러가 나온다!
extends에 SearchForId에 속할 경우, K를 아니면 never를 반환해야 한다.
(이정도로까지 해야하나 타입..?)
그럼 id 관련 키만 잘 추출될 것을 확인할 수 있다. 
2. discriminated union
좋다... key로 갈 때까지 가보자...
route, search를 키로 갖는 객체를 유니언으로 정한 Route라는 타입이 있다. 
유니언으로 되어 있는 Route이 타입의 value를 key로 갖는 하나의 합쳐진 타입 형태로 추출하려고 한다. 스텝 바이 스텝으로 가보자!
mapping
일단 그냥 키 맵핑을 해서 value가 key가 될 수 있도록 한다. 
route만 맵핑하면
이렇게 된다. 이제 각 value는 search의 value를 가져와야 한다. 
여기에 사용할 수 있는 아주 적절한 Extract라는 녀석을 사용해보자
Extract는 js 메서드로 치면 find 같은 녀석이다. 이 녀석을 제네릭으로 바꿔서 search의 밸류를 가져와보자. 
아주 완벽하게 가져오는 것을 확인할 수 있다. 
더 쉬운 방법
사실 as를 사용한 더 쉬운 방법이 있다.
(여기부터 살짝 머리가 안 돌아간다)
[R in Route]:은 Route 유니온 타입의 각 객체를 순회한다. 
as R["route"]를 통해 각 객체의 route 값을 새 키로 사용한다.
이제 위와 동일하게 search도 해주면 된다.
아주 깔끔하게 완성이다. 
3. discriminated union
참고 : total typescript

Total Typescript - key mapping

댓글