<div id="readability-page-1" class="page"><div><h2 id="zod">Zod</h2>
<p>요새 유효성 검사 라이브러리로 Zod를 많이 사용하고 있는데, Zod는 클래스를 활용하여 어떻게 복잡한 타입을 잘 숨겼는지 살펴보자</p>
<p><img src="https://velog.velcdn.com/images/dongha1992/post/4b63c4b6-d47e-42c9-9f1d-8df8cd3d8aa0/image.png"></p>
<p>Zod의 타입 추론을 보면 <code>ZodString</code>으로만 나오는 것을 확인할 수 있다. <code>Subclassing</code>을 사용하여 복잡한 내부 타입을 감춘 것인데 어떻게 작동하는지 알아보자</p>
<h2 id="클래스와-zod">클래스와 Zod</h2>
<p>Zod는 클래스로 타입이 작성되었다. <code>ZodType</code>이라는 Base Class가 있고, 다른 클래스들이 Base를 상속받아서 사용하는 식이다. (Zod 내부 타입이 대충 아래처럼 되어 있다고 가정하자)</p>
<p><img src="https://velog.velcdn.com/images/dongha1992/post/dde67d3d-d3de-477b-8bf4-93a915379638/image.png"></p>
<p><code>ZodString</code>도 Base를 상속받아서 사용한다.</p>
<p><img src="https://velog.velcdn.com/images/dongha1992/post/9750a3ef-a5a8-428c-b0c0-dfc7f2f1c1f1/image.png"></p>
<p>만약, 클래스를 사용하지 않고 <code>type</code> 키워드로만 구성한다면 어떻게 될까?</p>
<p><img src="https://velog.velcdn.com/images/dongha1992/post/57388a14-48b1-4010-a498-13e025c158ce/image.png"></p>
<p>클래스였던 <code>ZodType</code>을 변경하고 </p>
<p><img src="https://velog.velcdn.com/images/dongha1992/post/d6029e4a-6a95-41fc-9909-c2d3f73e7cc6/image.png"></p>
<p>마찬가지로 <code>ZodString</code>이 교차타입으로 <code>ZodType</code>를 받는다.</p>
<p><img src="https://velog.velcdn.com/images/dongha1992/post/1ea339cd-0d0b-4725-82bd-377f74c29790/image.png"></p>
<p><code>ZodString</code>에 호버를 해보면 내부 타입이 전부 드러나는 것을 확인할 수 있다. TypeScript는 기본적으로 모든 타입을 보여주려 한다. 하지만 때로 복잡한 타입은 감추는 것이 개발에 도움이 될 때도 있다.</p>
<h2 id="subclassing">Subclassing</h2>
<p><img src="https://velog.velcdn.com/images/dongha1992/post/052b5d0d-75f5-4ebc-aa72-cf84f7169522/image.png"></p>
<p>다시 클래스로 돌아가서, Zod는 두 단계의 제네릭으로 이루어져 있는데 <code>ZodString</code> 자체에는 제네릭이 없다. 대신, Base를 상속하여 제네릭 정보를 가져오는 것!</p>
<p><img src="https://velog.velcdn.com/images/dongha1992/post/fe6d88ca-4865-4d93-9abd-0bb1ccc3fe5a/image.png"></p>
<p>복잡한 내부 타입 개발 시 유용한 팁인 거 같다잉</p></div></div>

삶도 재입학이 되나요?

Zod
요새 유효성 검사 라이브러리로 Zod를 많이 사용하고 있는데, Zod는 클래스를 활용하여 어떻게 복잡한 타입을 잘 숨겼는지 살펴보자
Zod의 타입 추론을 보면 ZodString으로만 나오는 것을 확인할 수 있다. Subclassing을 사용하여 복잡한 내부 타입을 감춘 것인데 어떻게 작동하는지 알아보자
클래스와 Zod
Zod는 클래스로 타입이 작성되었다. ZodType이라는 Base Class가 있고, 다른 클래스들이 Base를 상속받아서 사용하는 식이다. (Zod 내부 타입이 대충 아래처럼 되어 있다고 가정하자)
ZodString도 Base를 상속받아서 사용한다.
만약, 클래스를 사용하지 않고 type 키워드로만 구성한다면 어떻게 될까?
클래스였던 ZodType을 변경하고 
마찬가지로 ZodString이 교차타입으로 ZodType를 받는다.
ZodString에 호버를 해보면 내부 타입이 전부 드러나는 것을 확인할 수 있다. TypeScript는 기본적으로 모든 타입을 보여주려 한다. 하지만 때로 복잡한 타입은 감추는 것이 개발에 도움이 될 때도 있다.
Subclassing
다시 클래스로 돌아가서, Zod는 두 단계의 제네릭으로 이루어져 있는데 ZodString 자체에는 제네릭이 없다. 대신, Base를 상속하여 제네릭 정보를 가져오는 것!
복잡한 내부 타입 개발 시 유용한 팁인 거 같다잉

Zod와 Typescript

댓글