<div id="readability-page-1" class="page"><div><h3 id="1-as-with-props">1. as with props</h3>
<img src="https://velog.velcdn.com/images/dongha1992/post/25e31acc-bfca-44d7-a8c6-bcbcd7e7f6de/image.png">
<code>as</code>라는 props를 받아 동적인 태그를 반환하는 <code>Wrapper</code>가 있다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/b9409232-2211-40da-8cfb-4ceac2488654/image.png">
<code>as</code>에 따라서 props를 체킹해주고, 
<img src="https://velog.velcdn.com/images/dongha1992/post/5cfb102f-4c6d-4ff4-97cf-3f418d1ff3ea/image.png">
존재하는 attribute를 추론해주게 하고 싶다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/da30f3a1-43e1-4ec1-9f4e-0c8b2bc8a0cc/image.png">
이런 비슷한 타입일 것이다. 하지만 <code>as</code>를 모두 작성할 수 없으니 <code>IntrinsicElements</code>를 활용하여 동적으로 적용해줘야 한다.
<img src="https://velog.velcdn.com/images/dongha1992/post/33f5eeb1-6a1c-48b3-a0c9-54e8aed7e8de/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/9bfa421c-833e-4b9a-9d05-671ec7618ec3/image.png">
이런 식으로 HTML tag들을 잘 가져온다. 
우리가 원하는 타입의 형태로 변경해주기 위해서는 <code>Indexed access types</code>를 활용하면 된다.
<img src="https://velog.velcdn.com/images/dongha1992/post/c51a164c-9dba-474a-8419-28b01c386c08/image.png">
<code>[keyof JSX.IntrinsicElements]</code>를 붙이면
<img src="https://velog.velcdn.com/images/dongha1992/post/c5d89994-2aa6-46e1-b640-67a0adbaf53b/image.png">
원하는 타입의 형태로 잘 나온다.
<img src="https://velog.velcdn.com/images/dongha1992/post/8d6b991e-56a5-4b5d-ac7d-621b79019fac/image.png">
이제 <code>WrapperProps</code> 덕분에 사용할 수 있는 태그들이 자동완성된다.
<img src="https://velog.velcdn.com/images/dongha1992/post/71a3cfec-da08-45e7-b378-24a48091ad78/image.png">
마지막으로 <code>ComponentProps</code>까지 추가해주면 
<img src="https://velog.velcdn.com/images/dongha1992/post/1fcbb67d-e7c8-4440-93b3-1916e9647de5/image.png">
<code>as</code>에 따라 없는 props 를 검사하고
<img src="https://velog.velcdn.com/images/dongha1992/post/97df51f0-2dac-44d0-ad80-7ee7f1c6cfeb/image.png">
있는 props는 잘 추론하는 것을 확인할 수 있다. 
<h4 id="또-다른-방법">또 다른 방법</h4>
위 방법말고 제네릭으로도 해결할 수 있다.
<img src="https://velog.velcdn.com/images/dongha1992/post/a009c6bf-11fb-427c-a3de-da122d682c39/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/e01bb0ba-e317-423c-8ec6-6ab5496e06fc/image.png">
<code>extends</code>와 <code>ComponentProps</code>를 해준다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/d8e1f106-9a42-4dde-839f-135a4f6fedce/image.png">
제네릭으로 하는 방법으로 타입을 지정하게 되면 <code>&lt;Comp ... /&gt;</code>에서 에러가 나온다.
<code>props.as</code>를 통해 전달된 값(Comp)은 JSX 요소로 렌더링되어야 하지만, 타입스크립트가 이를 JSX 요소로 사용할 수 있는 타입인지 확신하지 못하기 때문에 발생한 에러다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/363f1f4a-e455-4470-92e5-40321142f9f6/image.png">
<code>as string</code> 혹은 <code>as keyof JSX.IntrinsicElemnts</code>를 강제하면 해결된다.
<h3 id="2-as-with-custom-components">2. as with custom components</h3>
<img src="https://velog.velcdn.com/images/dongha1992/post/448e4cbb-5669-4c6b-bd4a-6d57fcb1e9d2/image.png">
그럼 이렇게 커스텀 컴포넌트를 넘기는 경우는 어떨까? 
<img src="https://velog.velcdn.com/images/dongha1992/post/a923899f-fda6-4ec7-a1ef-e9bb1aec1757/image.png">
<code>Custom</code>을 as로 넘기게 되면 난리가 난다. 기존에 만들었던 <code>Wrapper</code>의 타입으로는 부족하다. 
<h4 id="componentpropswithoutref">ComponentPropsWithoutRef</h4>
<img src="https://velog.velcdn.com/images/dongha1992/post/e12c437c-f8f9-47fc-aba9-49b850f8a964/image.png">
<code>ComponentProps&lt;TAs&gt;</code>가 props의 타입을 제대로 추론하지 못하는 있는 문제를 먼저 해결해보자. 
<code>Wrapper</code>에서 <code>ComponentProps</code> 이 부분을 수정해야한다. 
<code>ComponentProps</code>의 타입 데피니션 파일을 가보면 
<img src="https://velog.velcdn.com/images/dongha1992/post/ced9d846-decf-4104-9543-a0c78298e6c5/image.png">
무언가 <code>ComponentProps</code>과 비슷해 보이는 <code>ComponentPropsWithoutRef</code>와 <code>ComponentPropsWithRef</code>가 보인다.
주석에도 나와있든 <code>ComponentPropsWithoutRef</code>나 <code>ComponentPropsWithRef</code>를 쓰길 권장하고 있다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/5942eb68-4178-4e8d-bdea-e9f9f074b1de/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/3c94fc5b-0d9d-44c5-a986-38e3c872b31f/image.png">
<code>ComponentPropsWithoutRef</code>는 <code>ElementType</code>을 확장하고 있는데, <code>ElementType</code>의 타입 데피니션을 가보면
<img src="https://velog.velcdn.com/images/dongha1992/post/d257b191-f563-4462-a26b-0eea3abafe3f/image.png">
<code>JSX.IntrinsicElemnts</code>혹은 <code>ComponentType</code>를 반환하는 것을 알 수 있다!
<img src="https://velog.velcdn.com/images/dongha1992/post/35d390d4-9288-4a63-80b8-8ff206795d7d/image.png">
<code>Wrapper</code>에서 
<code>ComponentProps</code> -&gt; <code>ComponentPropsWithoutProps</code>
그리고 <code>keyof JSX.IntrinsicElemnts</code> -&gt; <code>ElementType</code>으로 변경한다.
<img src="https://velog.velcdn.com/images/dongha1992/post/dfa56470-de2e-4719-b0ea-2764fd71647b/image.png">
이제 완벽하게 제대로 타입 검증을 한다.
<img src="https://velog.velcdn.com/images/dongha1992/post/b187322f-4c13-42cc-9d3e-4ef110da8884/image.png">
마지막으로 <code>Comp</code>에 해줬던 <code>as keyof JSX.In trinsicElemnts</code>도 제거해도 문제가 없다. 
<h3 id="3-as-with-default-props">3. as with default props</h3>
<img src="https://velog.velcdn.com/images/dongha1992/post/bd628246-7d62-4a99-b2f0-5a6457a54ab6/image.png">
이제 조금 다른 예제를 살펴보자. <code>Link</code> 컴포넌트는 기본값으로 <code>as = "a"</code>를 받는다. 
<h4 id="문제">문제</h4>
<img src="https://velog.velcdn.com/images/dongha1992/post/4f3b9eec-2f40-46e4-81a0-ecb97e06ca91/image.png">
기본값으로 <code>as = "a"</code> 태그임에도 불구하고 props의 attribute를 제대로 추론하지 못 하고 있다. 
<h4 id="default-generic">default generic</h4>
가장 쉬운 방법은 제네릭에 기본값을 주는 것이다.
<img src="https://velog.velcdn.com/images/dongha1992/post/a60a131f-90cf-4d58-8cb4-3a6b43c6d86b/image.png">
기본값인 <code>&lt;a&gt;</code> 태그를 받아 제대로 attribute를 추론하고 있다.
<img src="https://velog.velcdn.com/images/dongha1992/post/d536522c-f299-4adb-9d84-c73c64235aba/image.png">
하지만, 문제가 생겨버리는데 바로 자동완성 추론이 사라진다는 것이다.
타입스크립트는 기본값인 <code>&lt;a&gt;</code> 태그만 <code>as</code>의 타입으로 추론해버린다.
그래서 <code>&lt;TAs&gt;</code>를 조건부로 수정해줘야 한다.
<h4 id="a-extend-b--c--d">a extend b ? c : d</h4>
<img src="https://velog.velcdn.com/images/dongha1992/post/38289a63-0700-4949-9166-03ed4700a2a4/image.png">
언뜻보기에 <code>TAs extends ElementType ? "a" : TAs</code> 이 조건식이 맞아보이지만 틀렸다.
왜냐!? <code>TAs</code>는 이미 <code>ElementType</code>을 상속받았기 때문에 항상 참이 되기 때문이다.
즉, <code>ElementType extends TAs ? "a" : TAs</code> 반대로 찾아줘야 한다.
<code>ElementType</code>(더 넓은 타입)이 <code>TAs</code>(더 구체적인 타입)에 패스가 되냐를 따져하는 것이다.
당연히 대부분의 경우 false이므로 <code>TAs</code>로 추론되고, <code>as</code> 가 없는 경우만 <code>"a"</code>로 추론될 것이다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/7f8340a2-2919-4e9a-9567-1276de1adf33/image.png">
이제 기본값을 충실하게 받으면서도 타입 체킹을 잘 해주는 녀석으로 거듭났다.
참고 : <a href="https://www.totaltypescript.com/">total typescript</a></div></div>

삶도 재입학이 되나요?

1. as with props
as라는 props를 받아 동적인 태그를 반환하는 Wrapper가 있다. 
as에 따라서 props를 체킹해주고, 
존재하는 attribute를 추론해주게 하고 싶다. 
이런 비슷한 타입일 것이다. 하지만 as를 모두 작성할 수 없으니 IntrinsicElements를 활용하여 동적으로 적용해줘야 한다.
이런 식으로 HTML tag들을 잘 가져온다. 
우리가 원하는 타입의 형태로 변경해주기 위해서는 Indexed access types를 활용하면 된다.
[keyof JSX.IntrinsicElements]를 붙이면
원하는 타입의 형태로 잘 나온다.
이제 WrapperProps 덕분에 사용할 수 있는 태그들이 자동완성된다.
마지막으로 ComponentProps까지 추가해주면 
as에 따라 없는 props 를 검사하고
있는 props는 잘 추론하는 것을 확인할 수 있다. 
또 다른 방법
위 방법말고 제네릭으로도 해결할 수 있다.
extends와 ComponentProps를 해준다. 
제네릭으로 하는 방법으로 타입을 지정하게 되면 <Comp ... />에서 에러가 나온다.
props.as를 통해 전달된 값(Comp)은 JSX 요소로 렌더링되어야 하지만, 타입스크립트가 이를 JSX 요소로 사용할 수 있는 타입인지 확신하지 못하기 때문에 발생한 에러다. 
as string 혹은 as keyof JSX.IntrinsicElemnts를 강제하면 해결된다.
2. as with custom components
그럼 이렇게 커스텀 컴포넌트를 넘기는 경우는 어떨까? 
Custom을 as로 넘기게 되면 난리가 난다. 기존에 만들었던 Wrapper의 타입으로는 부족하다. 
ComponentPropsWithoutRef
ComponentProps<TAs>가 props의 타입을 제대로 추론하지 못하는 있는 문제를 먼저 해결해보자. 
Wrapper에서 ComponentProps 이 부분을 수정해야한다. 
ComponentProps의 타입 데피니션 파일을 가보면 
무언가 ComponentProps과 비슷해 보이는 ComponentPropsWithoutRef와 ComponentPropsWithRef가 보인다.
주석에도 나와있든 ComponentPropsWithoutRef나 ComponentPropsWithRef를 쓰길 권장하고 있다. 
ComponentPropsWithoutRef는 ElementType을 확장하고 있는데, ElementType의 타입 데피니션을 가보면
JSX.IntrinsicElemnts혹은 ComponentType를 반환하는 것을 알 수 있다!
Wrapper에서 
ComponentProps -> ComponentPropsWithoutProps
그리고 keyof JSX.IntrinsicElemnts -> ElementType으로 변경한다.
이제 완벽하게 제대로 타입 검증을 한다.
마지막으로 Comp에 해줬던 as keyof JSX.In trinsicElemnts도 제거해도 문제가 없다. 
3. as with default props
이제 조금 다른 예제를 살펴보자. Link 컴포넌트는 기본값으로 as = "a"를 받는다. 
문제
기본값으로 as = "a" 태그임에도 불구하고 props의 attribute를 제대로 추론하지 못 하고 있다. 
default generic
가장 쉬운 방법은 제네릭에 기본값을 주는 것이다.
기본값인 <a> 태그를 받아 제대로 attribute를 추론하고 있다.
하지만, 문제가 생겨버리는데 바로 자동완성 추론이 사라진다는 것이다.
타입스크립트는 기본값인 <a> 태그만 as의 타입으로 추론해버린다.
그래서 <TAs>를 조건부로 수정해줘야 한다.
a extend b ? c : d
언뜻보기에 TAs extends ElementType ? "a" : TAs 이 조건식이 맞아보이지만 틀렸다.
왜냐!? TAs는 이미 ElementType을 상속받았기 때문에 항상 참이 되기 때문이다.
즉, ElementType extends TAs ? "a" : TAs 반대로 찾아줘야 한다.
ElementType(더 넓은 타입)이 TAs(더 구체적인 타입)에 패스가 되냐를 따져하는 것이다.
당연히 대부분의 경우 false이므로 TAs로 추론되고, as 가 없는 경우만 "a"로 추론될 것이다. 
이제 기본값을 충실하게 받으면서도 타입 체킹을 잘 해주는 녀석으로 거듭났다.
참고 : total typescript

Total Typescript - as

댓글