<div id="readability-page-1" class="page"><div><h3 id="1-type-helper">1. type helper</h3>
<img src="https://velog.velcdn.com/images/dongha1992/post/718844a4-eeee-440a-a384-a70054327fc5/image.png">
<code>Input</code>이 있다. 이 <code>Input</code>은 <code>uncontrolled</code> 와 <code>controlled</code>를 동시에 수행해야 한다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/c062d47f-2ae4-43b0-af24-88b203f2a27a/image.png">
그래서 위와 같이 <code>InputProps</code>를 작성한다. 필수 타입으로 <code>label</code>이 있고, <code>value</code>와 <code>onChange</code>는 <code>controlled</code>할 때만 필요하기 때문에 유니언으로 작성하고 <code>uncontrolled</code>일 때는 <code>{}</code>를 준다.
<img src="https://velog.velcdn.com/images/dongha1992/post/562a8642-9b2f-4587-a6bd-ee4a8ae4b973/image.png">
<code>Input</code> 컴포넌트는 문제 없이 타입을 적용했지만 
실행부에서 무언가 이상한 지점이 발견되었다. 
<code>onChange</code>없이 <code>value</code>만 있다거나 <code>value</code>가 없이 <code>onChange</code>만 있는 경우에 에러를 뱉지 않는 것이다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/fc722709-ee52-4b77-a247-08ee3035e86e/image.png">
이런 경우엔 <code>undefined</code>를 사용하면 된다. 필요없을 경우의 props를 유니언으로 <code>undefined</code> 지정해준다.
<img src="https://velog.velcdn.com/images/dongha1992/post/5ebdc310-9d9a-46c5-94b6-be2a5ab86f25/image.png">
이제서야 제대로된 컴파일 에러가 난다.
<img src="https://velog.velcdn.com/images/dongha1992/post/fd628c52-a94c-4ddd-93c5-4c608973e52c/image.png">
하지만 <code>InputProps</code>의 props가 늘어날수록 점점 타입이 복잡해질 것이다. 
그렇다면 재사용할 수 있는 확장 가능한 타입헬퍼로 만들어보자
<img src="https://velog.velcdn.com/images/dongha1992/post/3311eb3c-a449-4780-95d7-d6c8f4aa50a1/image.png">
<code>AllOrNothing</code>이라는 제네릭은 <code>T</code> 거나 객체의 모든 키를<code>undefined</code>로 만든 타입이다.
<img src="https://velog.velcdn.com/images/dongha1992/post/74c60dbe-3c53-4e14-b3e4-d2da9618191d/image.png">
일단<code>Result</code>를 만들고 <code>T</code>에 props 타입을 지정해준다. 
원하는 타입 형태와 비슷해지고 있다.
<img src="https://velog.velcdn.com/images/dongha1992/post/3f16aa80-c837-4049-90d2-a3f13cc9681f/image.png">
이제 <code>uncontrolled</code>일 경우, props가 undefined일 때를 지정해주면 되는데 이 부분을 <code>Record</code>를 활용하여 제네릭으로 만든다.
<img src="https://velog.velcdn.com/images/dongha1992/post/6fd881dd-5be8-4c33-9697-e5f723409e0c/image.png">
이제 원하는대로 타입이 지정된 것을 볼 수 있다. 복잡한 타입을 타입 헬퍼로 만들었다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/b082bd50-ca75-47c9-be33-fc2ad2b7292c/image.png">
사용처에선 아래와 같이 정리하여 사용할 수 있다.
<img src="https://velog.velcdn.com/images/dongha1992/post/18db354c-8e5d-4998-b46b-a1b4fdb34bab/image.png">
<h3 id="2-generic-constraints">2. generic constraints</h3>
방금 만든 타입 헬퍼 <code>AllOrNothing</code> 잘 활용할 수 있을 것 같지만, 아직 해결해야할 부분이 남아있다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/6ba1f83c-7405-4eba-a06f-0eea9db651d5/image.png">
<code>AllOrNothing</code>은 객체만을 받아야 하지만, <code>T</code>로 정한탓에 모든 타입이 허용된다. <code>extends</code>로 타입을 제한해줘야 한다.
<img src="https://velog.velcdn.com/images/dongha1992/post/c921bab2-7efc-4ed0-8168-28eebff20dbc/image.png">
이제 제대로된 컴파일 에러가 나오는 것을 확인할 수 있다.
<img src="https://velog.velcdn.com/images/dongha1992/post/fbce6787-6f5a-4bfc-b27a-0497d9491615/image.png">
하지만 <code>extends object</code>도 완벽하지 않다. 자바스크립트에선 배열도, null도 object이기 때문에.
정확히 객체 타입임을 지정하기 위해서 <code>Record&lt;string, any&gt;</code>를 사용해야 한다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/3789ec2e-d715-4b4a-8425-28e82fe10654/image.png">
여기서 눈여겨 봐야할 점은 타입 제한을 cascade constraints한다는 것인데, <code>AllOrNothin</code>에서 <code>extends</code>를 제거하면 연관된 모든 타입에서 에러가 난다. 이와 같은 타입 패턴은 오픈소스 라이브러리에서 자주 활용된다.
<h3 id="3-passing-type-arguments-to-component">3. passing type arguments to Component</h3>
<img src="https://velog.velcdn.com/images/dongha1992/post/9a1ab8bc-a509-43e8-9810-19c496262b3c/image.png">
위와 같은 테이블이 있다. table의 row는 아래와 같은 타입이라고 가정하자. 
<img src="https://velog.velcdn.com/images/dongha1992/post/ee2bcbcf-6eca-412e-84f8-55fe69f940da/image.png">
이제 테이블을 사용하려고 하는데 몇 가지 문제가 있다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/771af27d-6eed-4663-8b1e-769ae0bc6752/image.png">
이렇게 <code>rows</code>의 데이터가 잘못된 타입이 들어오거나
<img src="https://velog.velcdn.com/images/dongha1992/post/d4d43c56-628c-481c-ab11-d7e0de680bf9/image.png">
<code>rows</code>의 <code>User</code> 타입의 속성이 잘못된 타입으로 쓰일 경우 에러가 나오지 않는다는 것이다. 
<code>User</code>을 <code>Table</code>의 <code>rows</code>에 지정하기 위해선 어떻게 해야할까?
<img src="https://velog.velcdn.com/images/dongha1992/post/a6b83b3b-f9de-410d-b449-cf161892f2f4/image.png">
놀랍게도 JSX 태그 끝나는 지점에 <code>&lt;User&gt;</code>을 넣어주면 된다...(신기하다)
<img src="https://velog.velcdn.com/images/dongha1992/post/d2ada55c-2d0d-4383-9c8a-2c0216a8b492/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/53139ea1-33d8-44f4-be1c-7717a0186420/image.png">
이제 컴파일 에러가 제대로 나온다. 
참고 : <a href="https://www.totaltypescript.com/">total typescript</a></div></div>

삶도 재입학이 되나요?

1. type helper
Input이 있다. 이 Input은 uncontrolled 와 controlled를 동시에 수행해야 한다. 
그래서 위와 같이 InputProps를 작성한다. 필수 타입으로 label이 있고, value와 onChange는 controlled할 때만 필요하기 때문에 유니언으로 작성하고 uncontrolled일 때는 {}를 준다.
Input 컴포넌트는 문제 없이 타입을 적용했지만 
실행부에서 무언가 이상한 지점이 발견되었다. 
onChange없이 value만 있다거나 value가 없이 onChange만 있는 경우에 에러를 뱉지 않는 것이다. 
이런 경우엔 undefined를 사용하면 된다. 필요없을 경우의 props를 유니언으로 undefined 지정해준다.
이제서야 제대로된 컴파일 에러가 난다.
하지만 InputProps의 props가 늘어날수록 점점 타입이 복잡해질 것이다. 
그렇다면 재사용할 수 있는 확장 가능한 타입헬퍼로 만들어보자
AllOrNothing이라는 제네릭은 T 거나 객체의 모든 키를undefined로 만든 타입이다.
일단Result를 만들고 T에 props 타입을 지정해준다. 
원하는 타입 형태와 비슷해지고 있다.
이제 uncontrolled일 경우, props가 undefined일 때를 지정해주면 되는데 이 부분을 Record를 활용하여 제네릭으로 만든다.
이제 원하는대로 타입이 지정된 것을 볼 수 있다. 복잡한 타입을 타입 헬퍼로 만들었다. 
사용처에선 아래와 같이 정리하여 사용할 수 있다.
2. generic constraints
방금 만든 타입 헬퍼 AllOrNothing 잘 활용할 수 있을 것 같지만, 아직 해결해야할 부분이 남아있다. 
AllOrNothing은 객체만을 받아야 하지만, T로 정한탓에 모든 타입이 허용된다. extends로 타입을 제한해줘야 한다.
이제 제대로된 컴파일 에러가 나오는 것을 확인할 수 있다.
하지만 extends object도 완벽하지 않다. 자바스크립트에선 배열도, null도 object이기 때문에.
정확히 객체 타입임을 지정하기 위해서 Record<string, any>를 사용해야 한다. 
여기서 눈여겨 봐야할 점은 타입 제한을 cascade constraints한다는 것인데, AllOrNothin에서 extends를 제거하면 연관된 모든 타입에서 에러가 난다. 이와 같은 타입 패턴은 오픈소스 라이브러리에서 자주 활용된다.
3. passing type arguments to Component
위와 같은 테이블이 있다. table의 row는 아래와 같은 타입이라고 가정하자. 
이제 테이블을 사용하려고 하는데 몇 가지 문제가 있다. 
이렇게 rows의 데이터가 잘못된 타입이 들어오거나
rows의 User 타입의 속성이 잘못된 타입으로 쓰일 경우 에러가 나오지 않는다는 것이다. 
User을 Table의 rows에 지정하기 위해선 어떻게 해야할까?
놀랍게도 JSX 태그 끝나는 지점에 <User>을 넣어주면 된다...(신기하다)
이제 컴파일 에러가 제대로 나온다. 
참고 : total typescript

Total Typescript - generic

댓글