<div id="readability-page-1" class="page"><div><h3 id="1-string-to-object">1. string to object</h3>
자바스크립트에서 쿼리 스트링을 쿼리 파라미터로 만드는 것처럼 타입스크립트로 string을 obeject로 변환이 가능하다. 
몇 시간 도전했지만 실패한 그 문제를 함께 알아보자
<h4 id="문제">문제</h4>
<img src="https://velog.velcdn.com/images/dongha1992/post/1465a762-3a99-4527-9eca-4a5a6a47b8f3/image.png">
흔히 볼 수 있는 url 비슷한 string이 있다. 여기서 우리는 새로운 객체를 만들고 싶은 욕구를 참을 수 없어진다.
<code>/users/:id</code> 라면 <code>{ id : string }</code>으로 
<code>/users/:id/organisations/:organisationId</code>라면 <code>{ id: string; organisationId: string }</code>로 변환하고 싶다. 
그렇게 하여 아래 테스트 코드를 통과하는 것이 목표다. 그럼 한번 도전해보자
<img src="https://velog.velcdn.com/images/dongha1992/post/4bbe2f37-625d-4aab-903c-1cf00f3d7c8a/image.png">
<h4 id="split">Split</h4>
먼저 저 string을 쪼개야할 것 같은 느낌이 온다. string을 어떻게 split하지...?
사실 매우 좋은 패키지가 있다. 바로 <a href="https://github.com/millsp/ts-toolbelt">ts-toolbelt</a> !
말도 안되는 타입 유틸을 많이 제공한다.
그중에서도 <code>Split</code>을 사용할 건데 패키지의 내부 구현 코드는 복잡하여 내가 이해한 바를 ChatGPT의 도움을 받아 작성해보면
<pre><code>type Split&lt;
 S extends string,
 D extends string = ""
&gt; = S extends `${infer Part}${D}${infer Rest}`
 ? Part extends "" 
 ? Split&lt;Rest, D&gt; // 빈 부분이면 무시
 : [Part, ...Split&lt;Rest, D&gt;] // Part를 배열에 추가
 : S extends "" 
 ? [] // 남은 문자열이 빈 값이면 종료
 : [S]; // 마지막 부분 추가</code></pre>
핵심은 <code>Part</code>에 값이 있냐를 보고 분기를 타서 재귀적으로 <code>Split</code>을 수행하는 것이다.
<code>Split</code>은 여기까지 하고 다시 문제로 돌아가면
<img src="https://velog.velcdn.com/images/dongha1992/post/e7a1a357-220e-489a-a060-85d61d493cc6/image.png">
이런 식으로 작성할 수 있을 것이다. 그럼 엄청난 에러와 마주하게 된다.
<img src="https://velog.velcdn.com/images/dongha1992/post/11e0f9f7-5312-4aa0-8ec3-439f8df4ddba/image.png">
이유인 즉슨 <code>Split&lt;T, "/"&gt;</code>에서의 반환값은 튜플이다. 
<pre><code>type UserPath = "/users/:id";

type Splited = Split&lt;UserPath, "/"&gt; // ["users", ":id"]</code></pre>
순회하기 위해서 number 키워드가 필요하다
<img src="https://velog.velcdn.com/images/dongha1992/post/22e2b6ad-a9ae-484c-80d2-c10df7ae47fd/image.png">
원하는 형태가 조금씩 나오고 있다!
<h4 id="infer">infer</h4>
이제 <code>as</code>로 재맵핑과 <code>infer</code>가 필요하다. <code>:</code>가 붙은 형태라면 <code>K</code>를 키로써 남기고 그게 아니라면 <code>never</code> 하면된다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/9141999e-1f2e-4547-b65d-5069151e779a/image.png">
<code>K</code>를 infer로 추론하는 부분까지 추가해주면 완성이다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/ff791f19-c662-4374-959b-97c1b4c59493/image.png">
테스트는 모두 통과!
<h3 id="2-object-to-discriminated-union">2. object to discriminated union</h3>
자, 다음 문제는 객체를 구별된 유니언으로 변경하는 것이다. 간단해보이는데 어렵다...
<img src="https://velog.velcdn.com/images/dongha1992/post/fd228edd-096d-415e-b2cd-5dddfcfb3839/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/be92dc69-6858-4d01-917d-c202bb578658/image.png">
<code>MutuallyExclusive</code> 타입을 완성시켜서 '
<img src="https://velog.velcdn.com/images/dongha1992/post/8c9c46df-9e0e-4dc4-87ff-a96bb0a5ecde/image.png">
테스트를 통과하면 된다. 그럼 하나씩 해결해보자
<img src="https://velog.velcdn.com/images/dongha1992/post/60789970-71e8-4fc5-bc96-85727aaa720a/image.png">
먼저, 키 맵핑형태로 만들어준다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/9c79ba3a-8274-452a-92e6-f0cc9edc08a7/image.png">
이제 생성된 객체들을 유니온으로 묶기 위해 인덱스 접근을 한다.
<img src="https://velog.velcdn.com/images/dongha1992/post/58c73e3e-8ae3-4ce4-b5cb-1dbc796575d7/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/bcf2853c-37ef-4822-ad06-84539485ba1a/image.png">
여기서 살짝 난관에 부딪혔었는데, 추론 타입이 다시 string이 되어버려 무언가 잘못했나 싶었다. 하지만 우리는 재맵핑하는 과정에 있으므로 string이 맞는 추론이다.
만약 <code>T[K]</code>을 <code>K</code>로 변경해보면 
<img src="https://velog.velcdn.com/images/dongha1992/post/662bfbe7-54fe-4058-8730-95467c23a7b1/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/63954513-9924-4264-819b-04e69fad31e6/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/b8bdb89c-2e8e-4a18-b3cc-3c4cfcf2f63b/image.png">
유니언으로 잘 추론하고 있다. <code>K</code> 를 <code>Record</code> 로 키 밸류 쌍으로 만들자. 
<img src="https://velog.velcdn.com/images/dongha1992/post/0cbda368-8cb4-40e1-aa73-0a9cbea93a22/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/f56d0ece-bcb6-4cf6-b791-dd90e9c27c22/image.png">
멋진 추론
<img src="https://velog.velcdn.com/images/dongha1992/post/708cc2c3-e959-4422-82ae-d36fe40cc254/image.png">
테스트는 모두 통과다.
<h3 id="3-discriminated-union-to-object">3. discriminated union to object</h3>
타입스크립특 공부만하면 왜 이렇게 피곤해지는지 모르겠다.. 아무튼 이제 반대로 구별된 유니언을 객체로 변경하는 문제다.
<img src="https://velog.velcdn.com/images/dongha1992/post/9ee102d8-171b-4442-8d68-8b5f709a36c2/image.png">
이렇게 생긴 <code>Route</code> 유니언이 있다. 각 객체는 <code>route, search?</code> 키를 가진다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/b885e379-7b7c-4fd4-b62c-b0d57e29097d/image.png">
이<code>Route</code> 유니언을 객체 타입으로 만들 것이다. 자 그럼 들어가보자. 
뭘 먼저 해야하지 헷갈릴 땐 일단 순회를 돌아보자. 유니언 타입들이므로 indexed해서 각 키를 순회해보면 될 것 같다.
<img src="https://velog.velcdn.com/images/dongha1992/post/96054a84-17d1-46c5-9a9b-9902b2ba0ad5/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/c5242acc-2769-48cc-9065-8cbdbf710b7c/image.png">
원하는 형태가 조금 보이기 시작한다. 이제 임의로 지정해둔 <code>string</code>을 <code>Route["search]</code> 느낌으로다가 변경하면 될 거 같다.
하지만 여기서 살짝 문제가 발생하는데, <code>search</code>가 옵셔널이기 때문에 속성이 없다는 컴파일 에러가 나온다
<img src="https://velog.velcdn.com/images/dongha1992/post/6abfcef5-92ec-47a4-bd18-63377756122e/image.png">
이때 infer가 등장한다. 그렇기 위해선 먼저<code>[R in Route["route"]]</code>를 수정해줘야 한다.
<code>Route["route"]</code>는 각 유니온 <code>("/" | "/about" | "/admin" | "/admin/users")</code>을 순회하여 문자열 리터럴로 만든다.
여기서 생성된 <code>R</code>은 단순 문자열이므로 원본 유니온의 프로퍼티에 접근할 수 없다. <code>Route</code> 유니온의 각 멤버 객체에 접근하는 <code>R</code>을 생성해야 한다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/bc7dbee2-93c5-4f2e-8f8e-cab6a36a7e31/image.png">
이렇게 유니언 멤버에 접근하는 <code>R</code>을 만들고 이제 infer해보자.
<img src="https://velog.velcdn.com/images/dongha1992/post/888ddc44-46a0-43e4-ae31-5a2db5304cb5/image.png">
<code>R extends { search : any} ? R["search"] : never</code>에서 search 객체를 infer해서 조건부로 명시해주면 끝이다.
(휴.. 너무 어렵고만.. )
<img src="https://velog.velcdn.com/images/dongha1992/post/45d34a74-76a3-4a38-9047-bd5c39bdeeb8/image.png">
당당하게 테스트도 통과했다.
<h3 id="4-deep-partial">4. deep partial</h3>
마지막으로 deep partial 유틸에 대해 살펴보려고 한다. 오늘은 너무 피곤하니 여기까지만 하고 끝내야겠다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/d60e67d1-b49d-45cb-88d5-a14ce10a5c36/image.png">
deep partial은 말그래도 내부 객체까지 모두 파셜하게 만드는 유틸함수다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/e3093f8e-0fb1-4a50-829c-b9d12a04fadb/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/cce70e2c-cd4c-4489-92ff-4fb6cf003919/image.png">
요렇게 내부 객체의 모든 프로퍼티가 옵셔널하게 변경되면 테스트 통과다. 
<h4 id="recusive">recusive</h4>
무엇을 먼저 해야할지 고민이 된다면 일단 순회를 때리자
<img src="https://velog.velcdn.com/images/dongha1992/post/eafbbf30-528d-4a19-8495-76c0ce254f08/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/08642919-f9d5-458f-8260-c9322d198f4d/image.png">
가장 바깥 뎁스에 있는 프로퍼티만 옵셔널에 걸린 걸 확인할 수 있다. 그렇다면 저 순회하면서 옵셔널을 만드는 행위를 재귀로 하면 될 듯 해보인다.
<img src="https://velog.velcdn.com/images/dongha1992/post/434d5493-a703-4d0d-99b0-fbab30e1acd7/image.png">
설마 이게 끝일까 했는데
<img src="https://velog.velcdn.com/images/dongha1992/post/c5e60cf4-cf14-402c-b5f0-ce9db19e909d/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/11b3ec29-6d4f-472d-a015-8aa60831c939/image.png">
테스트에 통과하지 않는다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/3f057f79-3003-405a-bc5a-f6880cb4c652/image.png">
그런데 아무리 생각해도 이상하다. 실제 <code>DeepPartial</code>을 적용해보면 제대로 옵셔널로 추론하고 있다. 
<h4 id="array">array</h4>
이유인즉슨, 배열때문이다! <code>g</code>가 배열이기 때문에 배열 자체에 옵셔널을 먹여버리는 것!
하나씩 떼어서 살펴보면 
<img src="https://velog.velcdn.com/images/dongha1992/post/0fcd287a-28f9-49df-b317-32283b74682c/image.png">
우리가 궁극적으로 도달하고 싶은 형태는 각 프로퍼티에 대한 옵셔널이다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/513d55b3-3ff3-492b-b871-cf8caca90d26/image.png">
하지만 타입이 배열인 경우 조금 다르게 옵셔널이 되어 있는 것을 볼 수 있다.
<img src="https://velog.velcdn.com/images/dongha1992/post/8d2850f8-1eaa-4bb9-b910-6749718184ca/image.png">
<code>undefined</code>를 옵셔널로 허용해버리는 이상한 타입이 되어버린 것이다.
즉, 리커시브를 할 때 대상이 배열일 경우는 다르게 해줘야한다! 
무언가 느낌적인 느낌으로 infer를 사용해야함을 느낀다
<h4 id="infer-1">infer</h4>
<img src="https://velog.velcdn.com/images/dongha1992/post/83649c56-c89d-45fc-a561-02269134df76/image.png">
먼저 <code>Array</code>를 발라줄 조건부를 추가한다. 그리고 <code>any</code> 대신 <code>infer</code>를 추가한다.
<img src="https://velog.velcdn.com/images/dongha1992/post/a628c8bf-3786-41a4-90e8-df42b34818dc/image.png">
휴.. 머리가 지끈거린다.. 여기서 우리가 원하는 것은 배열 각 요소에 대한 <code>DeepPartial</code>이다. 그래서 <code>T</code>가 배열인 경우, <code>Array&lt;infer U&gt;</code>를 통해 배열 요소인 객체를 infer했다. 
그리고 <code>Array&lt;DeepPartial&lt;U&gt;&gt;</code> 그 객체(<code>U</code>)를 <code>DeepPartial</code>하고 다시 <code>Array</code>로 만들어줬다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/9286a1d5-da1e-4ae0-8018-4fef9ccf597e/image.png">
이제 배열<code>G</code>가 원하는대로 옵셔널한 형태를 갖는다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/3f87372e-1fed-4156-8252-79a12b987e8f/image.png">
<code>undefined</code>도 불가하다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/db051236-9f44-4a5a-87e9-d6fb365b572f/image.png">
당연히 테스트도 모두 통과다.
(하 오늘 타입스크리트 여기까지)
참고: <a href="https://www.totaltypescript.com/">total-typescript</a></div></div>

삶도 재입학이 되나요?

1. string to object
자바스크립트에서 쿼리 스트링을 쿼리 파라미터로 만드는 것처럼 타입스크립트로 string을 obeject로 변환이 가능하다. 
몇 시간 도전했지만 실패한 그 문제를 함께 알아보자
문제
흔히 볼 수 있는 url 비슷한 string이 있다. 여기서 우리는 새로운 객체를 만들고 싶은 욕구를 참을 수 없어진다.
/users/:id 라면 { id : string }으로
/users/:id/organisations/:organisationId라면 { id: string; organisationId: string }로 변환하고 싶다. 
그렇게 하여 아래 테스트 코드를 통과하는 것이 목표다. 그럼 한번 도전해보자
Split
먼저 저 string을 쪼개야할 것 같은 느낌이 온다. string을 어떻게 split하지...?
사실 매우 좋은 패키지가 있다. 바로 ts-toolbelt !
말도 안되는 타입 유틸을 많이 제공한다.
그중에서도 Split을 사용할 건데 패키지의 내부 구현 코드는 복잡하여 내가 이해한 바를 ChatGPT의 도움을 받아 작성해보면
type Split<
 S extends string,
 D extends string = ""
> = S extends `${infer Part}${D}${infer Rest}`
 ? Part extends "" 
 ? Split<Rest, D> // 빈 부분이면 무시
 : [Part, ...Split<Rest, D>] // Part를 배열에 추가
 : S extends "" 
 ? [] // 남은 문자열이 빈 값이면 종료
 : [S]; // 마지막 부분 추가
핵심은 Part에 값이 있냐를 보고 분기를 타서 재귀적으로 Split을 수행하는 것이다.
Split은 여기까지 하고 다시 문제로 돌아가면
이런 식으로 작성할 수 있을 것이다. 그럼 엄청난 에러와 마주하게 된다.
이유인 즉슨 Split<T, "/">에서의 반환값은 튜플이다. 
type UserPath = "/users/:id";
type Splited = Split<UserPath, "/"> // ["users", ":id"]
순회하기 위해서 number 키워드가 필요하다
원하는 형태가 조금씩 나오고 있다!
infer
이제 as로 재맵핑과 infer가 필요하다. :가 붙은 형태라면 K를 키로써 남기고 그게 아니라면 never 하면된다. 
K를 infer로 추론하는 부분까지 추가해주면 완성이다. 
테스트는 모두 통과!
2. object to discriminated union
자, 다음 문제는 객체를 구별된 유니언으로 변경하는 것이다. 간단해보이는데 어렵다...
MutuallyExclusive 타입을 완성시켜서 '
테스트를 통과하면 된다. 그럼 하나씩 해결해보자
먼저, 키 맵핑형태로 만들어준다. 
이제 생성된 객체들을 유니온으로 묶기 위해 인덱스 접근을 한다.
여기서 살짝 난관에 부딪혔었는데, 추론 타입이 다시 string이 되어버려 무언가 잘못했나 싶었다. 하지만 우리는 재맵핑하는 과정에 있으므로 string이 맞는 추론이다.
만약 T[K]을 K로 변경해보면 
유니언으로 잘 추론하고 있다. K 를 Record 로 키 밸류 쌍으로 만들자. 
멋진 추론
테스트는 모두 통과다.
3. discriminated union to object
타입스크립특 공부만하면 왜 이렇게 피곤해지는지 모르겠다.. 아무튼 이제 반대로 구별된 유니언을 객체로 변경하는 문제다.
이렇게 생긴 Route 유니언이 있다. 각 객체는 route, search? 키를 가진다. 
이Route 유니언을 객체 타입으로 만들 것이다. 자 그럼 들어가보자. 
뭘 먼저 해야하지 헷갈릴 땐 일단 순회를 돌아보자. 유니언 타입들이므로 indexed해서 각 키를 순회해보면 될 것 같다.
원하는 형태가 조금 보이기 시작한다. 이제 임의로 지정해둔 string을 Route["search] 느낌으로다가 변경하면 될 거 같다.
하지만 여기서 살짝 문제가 발생하는데, search가 옵셔널이기 때문에 속성이 없다는 컴파일 에러가 나온다
이때 infer가 등장한다. 그렇기 위해선 먼저[R in Route["route"]]를 수정해줘야 한다.
Route["route"]는 각 유니온 ("/" | "/about" | "/admin" | "/admin/users")을 순회하여 문자열 리터럴로 만든다.
여기서 생성된 R은 단순 문자열이므로 원본 유니온의 프로퍼티에 접근할 수 없다. Route 유니온의 각 멤버 객체에 접근하는 R을 생성해야 한다. 
이렇게 유니언 멤버에 접근하는 R을 만들고 이제 infer해보자.
R extends { search : any} ? R["search"] : never에서 search 객체를 infer해서 조건부로 명시해주면 끝이다.
(휴.. 너무 어렵고만.. )
당당하게 테스트도 통과했다.
4. deep partial
마지막으로 deep partial 유틸에 대해 살펴보려고 한다. 오늘은 너무 피곤하니 여기까지만 하고 끝내야겠다. 
deep partial은 말그래도 내부 객체까지 모두 파셜하게 만드는 유틸함수다. 
요렇게 내부 객체의 모든 프로퍼티가 옵셔널하게 변경되면 테스트 통과다. 
recusive
무엇을 먼저 해야할지 고민이 된다면 일단 순회를 때리자
가장 바깥 뎁스에 있는 프로퍼티만 옵셔널에 걸린 걸 확인할 수 있다. 그렇다면 저 순회하면서 옵셔널을 만드는 행위를 재귀로 하면 될 듯 해보인다.
설마 이게 끝일까 했는데
테스트에 통과하지 않는다. 
그런데 아무리 생각해도 이상하다. 실제 DeepPartial을 적용해보면 제대로 옵셔널로 추론하고 있다. 
array
이유인즉슨, 배열때문이다! g가 배열이기 때문에 배열 자체에 옵셔널을 먹여버리는 것!
하나씩 떼어서 살펴보면 
우리가 궁극적으로 도달하고 싶은 형태는 각 프로퍼티에 대한 옵셔널이다. 
하지만 타입이 배열인 경우 조금 다르게 옵셔널이 되어 있는 것을 볼 수 있다.
undefined를 옵셔널로 허용해버리는 이상한 타입이 되어버린 것이다.
즉, 리커시브를 할 때 대상이 배열일 경우는 다르게 해줘야한다! 
무언가 느낌적인 느낌으로 infer를 사용해야함을 느낀다
infer
먼저 Array를 발라줄 조건부를 추가한다. 그리고 any 대신 infer를 추가한다.
휴.. 머리가 지끈거린다.. 여기서 우리가 원하는 것은 배열 각 요소에 대한 DeepPartial이다. 그래서 T가 배열인 경우, Array<infer U>를 통해 배열 요소인 객체를 infer했다. 
그리고 Array<DeepPartial> 그 객체(U)를 DeepPartial하고 다시 Array로 만들어줬다. 
이제 배열G가 원하는대로 옵셔널한 형태를 갖는다. 
undefined도 불가하다. 
당연히 테스트도 모두 통과다.
(하 오늘 타입스크리트 여기까지)
참고: total-typescript

Total Typescript - advanced type transformation

댓글