<div id="readability-page-1" class="page"><div><h3 id="1-mapped-type">1. mapped type</h3>
<img src="https://velog.velcdn.com/images/dongha1992/post/bc30a55b-5dc1-42db-b270-e50977239a45/image.png">
특정 키를 담은<code>Attributes</code> 인터페이스를 활용하여 <code>AttributeGetters</code>를 완성하여 아래 테스트를 만족해야 한다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/98345e44-989b-402d-8ea8-c1820011b2f6/image.png">
가장 먼저 생각할 수 있는 것은 <code>Record</code>다.
<img src="https://velog.velcdn.com/images/dongha1992/post/f517bab4-7702-42a3-8542-2532ef689b13/image.png">
하지만 <code>age</code>가 number 타입이기에 적절한 타입이 아니다. (유니언을 사용하게 되면 타입 가드가 필요하기 때문에 복잡도가 증가한다)
위에 대한 해답은 맵핑된 타입으로 처리하는 것이다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/d30042b7-7848-49f0-b33a-337dcf24153a/image.png">
<code>Attributes</code> <code>keyof</code> 하여 키 타입을 생성하고, <code>K</code>로 해당 타입을 맵핑해서 가져오면 된다.
<img src="https://velog.velcdn.com/images/dongha1992/post/75256831-82d7-434e-afcc-f4d28ccf49fd/image.png">
테스트는 통과된다.
<h3 id="2-as-in-mapped-type">2. as in mapped type</h3>
<img src="https://velog.velcdn.com/images/dongha1992/post/96f7906a-4dc6-48fa-a89b-569d7fabdbc5/image.png">
그렇다면 아래 테스트에서 객체의 키를 변경하면 어떻게 될까
<img src="https://velog.velcdn.com/images/dongha1992/post/75256831-82d7-434e-afcc-f4d28ccf49fd/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/fc656249-4014-4b69-b096-ecadb09412a9/image.png">
키값이 변경되었을 때 키값을 재맵핑하는 방법으로는 리터럴 타입을 사용하면 된다.
<img src="https://velog.velcdn.com/images/dongha1992/post/0d48947c-ce56-45ec-84b4-0396fb82c693/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/36336683-3364-4f69-9a5b-6eb4890ee2a2/image.png">
하지만 <code>getFirstname</code> 처럼 대문자 변경이 안된 것을 확인할 수 있다. 이때 <code>Capitalize</code>를 사용하면 된다.
<img src="https://velog.velcdn.com/images/dongha1992/post/7e0edc50-0c42-4367-9aef-66107579ecc0/image.png">
이제 <code>AttributeGetters</code> 부분을 수정해준다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/14027f7d-a857-435a-b512-2d2ecfa5371a/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/ec5a3c25-452f-4f1e-b784-aa97dda263b5/image.png">
하지만 타입을 확인해보면 <code>unknown</code>으로 나오는 것을 확인 할 수 있다.
<img src="https://velog.velcdn.com/images/dongha1992/post/5dda950e-e4fa-4090-89ff-d0232f2c858e/image.png">
왜냐하면 당연하게도 여기서 <code>K</code>는 <code>Attributes</code> 의 <code>K</code>가 아니기 때문이다. 
그렇기 때문에 <code>Attributes</code>를 순회하여 <code>K</code>를 사용해야 한다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/2c618ab8-850d-4b2f-9c80-4a1cbecd60f1/image.png">
그리고 변경된 키로 수정하기 위해서 <code>as</code>로 재맵핑을 한다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/2076845f-33ae-4ab6-9961-d2114e3440af/image.png">
이렇게 재맵핑을 하면 기존의 타입을 수정하지 않아도 된다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/462ec859-b4dd-4107-a4a6-5f877b4adbef/image.png">
<h3 id="3-generic-function-with-generic-type">3. Generic function with generic type</h3>
<img src="https://velog.velcdn.com/images/dongha1992/post/2b75d8ac-d4f6-46d5-a5f2-babe0fa5e200/image.png">
비동기 함수를 받아서 <code>try catch</code>를 수행하는 <code>safeFunction</code>이라는 함수가 있다. 
위 함수에서 인자의 타입인 <code>PromiseFunc</code>의 타입을 완성해야 한다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/e13811fa-8ec6-49c1-9c69-80e771d9fea5/image.png">
<code>func</code>함수는 <code>Promise&lt;Error | {제네릭한 리턴값}&gt;</code>을 리턴해야 한다. 
일단 <code>PromiseFunc</code>를 제네릭으로 받는다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/cd350d4b-270d-4dcb-a1a5-96441d0f73c3/image.png">
그리고 <code>safeFunction</code>을 제네릭하게 만든다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/0236c7e4-b91a-4045-ab4f-07439ec23df6/image.png">
이제 <code>func</code>의 리턴 타입이 정확하게 나오는 걸 확인할 수 있다.
<img src="https://velog.velcdn.com/images/dongha1992/post/372922d5-7590-46e9-8229-bdbe2a4d0604/image.png">
<h3 id="4-mutiple-type-args-in-generic-function">4. Mutiple type args in generic function</h3>
제네릭한 인자들의 타입을 설정하는 상황은 어떨까. 3번의 상황에서 <code>args</code>라는 여러 인자들이 들어온다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/ce559f7b-e61f-4730-a2ac-47eafb0e9453/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/f419ca17-bc88-495d-b13a-47ad5b7e7d8c/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/9dc1d556-cec3-412e-991a-1bcc9d9cd148/image.png">
3번의 상황(인자가 없는)을 만족하면서 여러 인자가 들어오는 상황에 대해 타입을 어떻게 작성하면 될까. 
먼저, <code>args</code>의 타입도 제네릭 타입으로 받는다. <code>TArgs</code>라 명명한다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/1b368c56-5680-4a79-87db-8bccf1c9380c/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/59c5eb4b-205f-480d-be51-0487b804f890/image.png">
그럼 rest 매개 변수는 배열 형식이라는 타입 에러가 나온다. 그럼 제네릭으로 받은 <code>TArgs</code>에 <code>extends</code>를 해주면 된다.
<img src="https://velog.velcdn.com/images/dongha1992/post/9982865e-8f3f-4bd7-83e2-1c6819f402ce/image.png">
그리고 동일하게 <code>safeFunction</code>의 타입에서 <code>TArgs</code>를 받아준다.
<img src="https://velog.velcdn.com/images/dongha1992/post/6a7fa9bc-c5a8-4e4c-8f20-7c0dfed77294/image.png">
그럼 아래와 같은 타입 에러가 나온다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/66a3837b-1594-43f6-b58c-e2409e753948/image.png">
이제 <code>safeFunction</code>의 인자 <code>...args</code>의 타입을 <code>TArgs</code>로 받으면 된다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/c7c62d7e-1596-491a-86ba-426581dfe926/image.png">
아래와 같이 제대로 된 타입을 보여준다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/c9d37602-7100-440f-a4fa-503cf5978261/image.png">
그렇다면 왜 <code>TArgs[]</code>로 받지 않고 <code>TArgs</code>로 인자를 받고 <code>extends any[]</code>로 제네릭하는 것일까?
각 인자의 타입이 같다고 확신할 수 없어 function type의 parameter는 tuple이기 때문이다.
아래는 function type의 parameter는 tuple 예시 
<img src="https://velog.velcdn.com/images/dongha1992/post/7b147593-aee5-4ee5-bacd-d03062131027/image.png">
그렇기 때문에 제네릭한 함수 타입의 인자 타입인 경우 <code>extends any[]</code>로 받아줘야 한다. 
참고 : <a href="https://www.totaltypescript.com/">totalTypescript</a></div></div>

삶도 재입학이 되나요?

1. mapped type
특정 키를 담은Attributes 인터페이스를 활용하여 AttributeGetters를 완성하여 아래 테스트를 만족해야 한다. 
가장 먼저 생각할 수 있는 것은 Record다.
하지만 age가 number 타입이기에 적절한 타입이 아니다. (유니언을 사용하게 되면 타입 가드가 필요하기 때문에 복잡도가 증가한다)
위에 대한 해답은 맵핑된 타입으로 처리하는 것이다. 
Attributes keyof 하여 키 타입을 생성하고, K로 해당 타입을 맵핑해서 가져오면 된다.
테스트는 통과된다.
2. as in mapped type
그렇다면 아래 테스트에서 객체의 키를 변경하면 어떻게 될까
키값이 변경되었을 때 키값을 재맵핑하는 방법으로는 리터럴 타입을 사용하면 된다.
하지만 getFirstname 처럼 대문자 변경이 안된 것을 확인할 수 있다. 이때 Capitalize를 사용하면 된다.
이제 AttributeGetters 부분을 수정해준다. 
하지만 타입을 확인해보면 unknown으로 나오는 것을 확인 할 수 있다.
왜냐하면 당연하게도 여기서 K는 Attributes 의 K가 아니기 때문이다. 
그렇기 때문에 Attributes를 순회하여 K를 사용해야 한다. 
그리고 변경된 키로 수정하기 위해서 as로 재맵핑을 한다. 
이렇게 재맵핑을 하면 기존의 타입을 수정하지 않아도 된다. 
3. Generic function with generic type
비동기 함수를 받아서 try catch를 수행하는 safeFunction이라는 함수가 있다. 
위 함수에서 인자의 타입인 PromiseFunc의 타입을 완성해야 한다. 
func함수는 Promise<Error | {제네릭한 리턴값}>을 리턴해야 한다. 
일단 PromiseFunc를 제네릭으로 받는다. 
그리고 safeFunction을 제네릭하게 만든다. 
이제 func의 리턴 타입이 정확하게 나오는 걸 확인할 수 있다.
4. Mutiple type args in generic function
제네릭한 인자들의 타입을 설정하는 상황은 어떨까. 3번의 상황에서 args라는 여러 인자들이 들어온다. 
3번의 상황(인자가 없는)을 만족하면서 여러 인자가 들어오는 상황에 대해 타입을 어떻게 작성하면 될까. 
먼저, args의 타입도 제네릭 타입으로 받는다. TArgs라 명명한다. 
그럼 rest 매개 변수는 배열 형식이라는 타입 에러가 나온다. 그럼 제네릭으로 받은 TArgs에 extends를 해주면 된다.
그리고 동일하게 safeFunction의 타입에서 TArgs를 받아준다.
그럼 아래와 같은 타입 에러가 나온다. 
이제 safeFunction의 인자 ...args의 타입을 TArgs로 받으면 된다. 
아래와 같이 제대로 된 타입을 보여준다. 
그렇다면 왜 TArgs[]로 받지 않고 TArgs로 인자를 받고 extends any[]로 제네릭하는 것일까?
각 인자의 타입이 같다고 확신할 수 없어 function type의 parameter는 tuple이기 때문이다.
아래는 function type의 parameter는 tuple 예시
그렇기 때문에 제네릭한 함수 타입의 인자 타입인 경우 extends any[]로 받아줘야 한다. 
참고 : totalTypescript

Total Typescript - mapped & generic

댓글