<div id="readability-page-1" class="page"><div><h3 id="prop-groups-with-satisfies">prop groups with satisfies</h3>
<img src="https://velog.velcdn.com/images/dongha1992/post/e51098af-ee1e-409a-affc-efe4883b1798/image.png">
<code>buttonPropsMap</code>은 버튼 커스텀 타입의 key와 네이티브 버튼 props을 속성값으로 갖는 객체다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/66356b90-1467-4fe2-965a-0b2493b976ad/image.png">
위와 같이 사용하기 위해 <code>ButtonProps</code>을 만들어 준다.
<img src="https://velog.velcdn.com/images/dongha1992/post/f7546dc9-6ec7-42b5-a27c-f17644eb6564/image.png">
<code>variant</code>는 <code>submit | next | reset</code> 리터럴 타입이 되었다.
<img src="https://velog.velcdn.com/images/dongha1992/post/265dcfbf-fcf1-4139-b7db-9d630a34b2f3/image.png">
자동완성이 잘 작동하고 있다. 
이제 <code>variant</code>를 props로 받아서 key와 맵핑된 네이티브 버튼 props를 렌더링한다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/8ef975df-6750-4f9a-8335-0ae860896ec3/image.png">
여기서 문제가 있다. 
먼저, <code>buttonPropsMap</code>에서 <code>illegalProperty</code> 를 에러로 걸러내지 못한 것 (illegalProperty는 네이티브 버튼 타입에 속하면 안되는 타입이라고 가정하자)
<img src="https://velog.velcdn.com/images/dongha1992/post/b4c1e2d4-b0b2-4ded-859f-5aa30c39a94e/image.png">
가장 먼저 생각할 수 있는 것은, <code>Record</code>로 <code>buttonPropsMap</code>의 타입을 명시해주는 것이다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/709e2631-d0ab-4510-a00d-0ea5a2ac629b/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/d38939f5-2150-41a9-b6cc-2bcbfcdbc751/image.png">
이제 네이티브 버튼의 props가 아닌 <code>illegalProperty</code>를 에러로 체킹한다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/bf7cbd9f-8a3d-448b-8a4c-1ab2f3622c78/image.png">
그리고 네이티브 버튼의 props도 자동완성으로 사용할 수 있게 된다. 
하지만,<code>Record&lt;string, ...&gt;</code>으로 키를 string 지정해버리면서 문제가 생긴다.
<img src="https://velog.velcdn.com/images/dongha1992/post/fe185b1e-1d03-4112-a901-4de67b3f15c6/image.png">
<code>variant</code>의 리터럴 타입이 string 타입으로 오버라이딩 되어버리면서 자동완성을 사용하지 못하게 된 것이다. 
의도하지 않게 타입이 확장되어버렸다.
이를 해결하기 위해서는 하드코딩으로 키를 지정하는 것이다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/d644d792-c7e6-4b3d-8342-4f36bc458fe9/image.png">
하지만 이는 확장성에 있어서 좋은 방법이 아니다. 바라보고 있는 <code>buttonPropsMap</code>의 키값이 추가되면 수동으로 또 타입도 추가해야 하기 때문에!
<img src="https://velog.velcdn.com/images/dongha1992/post/4f8f20ea-1a77-4c5a-af5f-772b2ee42231/image.png">
위와 같이<code>ButtonPropsMap</code>에서 <code>buttonPropsMap</code>의 키값을 참조해서 쓰고 싶지만 순환구조라서 참조할 수 없다.
이럴 때 사용할 수 있는 타입이 <code>satisfies</code>다.
<img src="https://velog.velcdn.com/images/dongha1992/post/c5b2cace-bd0a-4fe5-a9ef-584e211c55b0/image.png">
<code>satisfies</code>는 타입을 오버라이딩하지 않기 때문에 원하는 의도대로 타입을 지정할 수 있게 된다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/c735e3eb-875c-4575-bc53-f72669cdbdc9/image.png">
자동완성도 잘 되고 있다. 
참고 : <a href="https://www.totaltypescript.com/">total Typescript</a></div></div>

삶도 재입학이 되나요?

prop groups with satisfies
buttonPropsMap은 버튼 커스텀 타입의 key와 네이티브 버튼 props을 속성값으로 갖는 객체다. 
위와 같이 사용하기 위해 ButtonProps을 만들어 준다.
variant는 submit | next | reset 리터럴 타입이 되었다.
자동완성이 잘 작동하고 있다. 
이제 variant를 props로 받아서 key와 맵핑된 네이티브 버튼 props를 렌더링한다. 
여기서 문제가 있다. 
먼저, buttonPropsMap에서 illegalProperty 를 에러로 걸러내지 못한 것 (illegalProperty는 네이티브 버튼 타입에 속하면 안되는 타입이라고 가정하자)
가장 먼저 생각할 수 있는 것은, Record로 buttonPropsMap의 타입을 명시해주는 것이다. 
이제 네이티브 버튼의 props가 아닌 illegalProperty를 에러로 체킹한다. 
그리고 네이티브 버튼의 props도 자동완성으로 사용할 수 있게 된다. 
하지만,Record<string, ...>으로 키를 string 지정해버리면서 문제가 생긴다.
variant의 리터럴 타입이 string 타입으로 오버라이딩 되어버리면서 자동완성을 사용하지 못하게 된 것이다. 
의도하지 않게 타입이 확장되어버렸다.
이를 해결하기 위해서는 하드코딩으로 키를 지정하는 것이다. 
하지만 이는 확장성에 있어서 좋은 방법이 아니다. 바라보고 있는 buttonPropsMap의 키값이 추가되면 수동으로 또 타입도 추가해야 하기 때문에!
위와 같이ButtonPropsMap에서 buttonPropsMap의 키값을 참조해서 쓰고 싶지만 순환구조라서 참조할 수 없다.
이럴 때 사용할 수 있는 타입이 satisfies다.
satisfies는 타입을 오버라이딩하지 않기 때문에 원하는 의도대로 타입을 지정할 수 있게 된다. 
자동완성도 잘 되고 있다. 
참고 : total Typescript

Total Typescript - props

댓글