<div id="readability-page-1" class="page"><div><p>타입스크립트 제대로 공부하며 배운 것을 정리 </p>
<h3 id="1-literals-to-wider-type">1. literals to wider type</h3>
<p><img src="https://velog.velcdn.com/images/dongha1992/post/69670295-94d1-4f7c-a7ec-7961621aa6af/image.png"></p>
<ul>
<li>리터럴 타입과 wider type을 함께 union으로 사용하는 경우다. 이렇게 되면 <code>string</code> 타입이 더 큰 집합을 가지기 때문에 다른 리터럴 타입들이 적용되지 않는다. </li>
</ul>
<p><img src="https://velog.velcdn.com/images/dongha1992/post/548a3312-aa1f-4103-9e88-3feaa8f7dda7/image.png"></p>
<p>이렇게 되면 자동완성에도 리터럴 타입이 나오지 않는다. </p>
<p>이를 해결하기 위해 아래처럼 <code>string &amp; {}</code> 를 추가해준다. string 타입의 객체임을 명시하면서 타입스크립트 컴파일러의 유니언 타입에서 타입 축소를 방지한다고 한다(정확한 원리는 모르겠음)</p>
<p><img src="https://velog.velcdn.com/images/dongha1992/post/c5d17c82-cbc5-4e49-87de-5ae5f6354815/image.png"></p>
<p>그럼 아래처럼 자동완성이 잘 나오게 된다.</p>
<p><img src="https://velog.velcdn.com/images/dongha1992/post/6886a490-30c8-42f8-a922-57a79a6507a7/image.png"></p>
<h3 id="2-map-hasnt-narrow-mapget">2. map hasn't narrow map.get()</h3>
<p><img src="https://velog.velcdn.com/images/dongha1992/post/20e9a01c-68cd-4ab5-9e64-c509cdbcb416/image.png"></p>
<p><img src="https://velog.velcdn.com/images/dongha1992/post/1a415175-ce4e-41ac-aec0-a2f6d0d54ed4/image.png"></p>
<p>위 상황처럼 타입 narrowing을 통해 <code>Map</code> 의 에러에 접근하려고 한다. 하지만 error 객체를 찾지 못하는 타입 에러를 뱉는다. </p>
<p>이유는 타입스크립트는 <code>Map.has()</code>와 <code>Map.get()</code>의 관계성을 이해하지 못하기 때문이다.</p>
<p>이를 해결하기 위한 좋은 방법은 <code>Map.get()</code>으로만 타입 좁히기를 사용하는 것</p>
<p><img src="https://velog.velcdn.com/images/dongha1992/post/a2cef103-4490-4b47-9495-4e4c820dfa76/image.png"></p>
<h3 id="3-narrowing-unknown-type">3. narrowing unknown type</h3>
<p><img src="https://velog.velcdn.com/images/dongha1992/post/e2a24f04-ae07-4632-af18-d3c63e236054/image.png"></p>
<p>unknown 타입의 타입 좁히기를 해서 id를 return 해야하는 상황이다. value의 타입을 좁혔지만 여전히 <code>data</code>의 타입이 unknown인 상태다</p>
<p><img src="https://velog.velcdn.com/images/dongha1992/post/50247d55-374e-4bac-abd9-6368fb5ddb10/image.png"></p>
<p>이를 해결하기 위해서는 <code>id</code> 타입까지 타입 좁히기를 해줘야 한다.</p>
<p><img src="https://velog.velcdn.com/images/dongha1992/post/b86f7b99-d7bb-47ba-97e5-b9fd294c6681/image.png"></p>
<p>이렇게까진 타입스크립트를 사용한 적이 없어서 반성했다...</p>
<h3 id="4-narrowing-different-scope">4. narrowing different scope</h3>
<p><img src="https://velog.velcdn.com/images/dongha1992/post/f780d633-194f-4904-8139-5cc9997ebdd1/image.png"></p>
<p><code>searchParams</code> 를 타입 좁히기한 상황이다. 하지만 여전히 <code>searchParams.name</code>에서 에러가 나오는 상황이다 (실무에서도 이런 경우가 좀 있었던 거 같다) </p>
<p>이러한 문제가 발생한 이유는 타입 좁히기는 <strong>타입 좁히기가 다른 스코프를 커버하지 않기 때문이다.</strong></p>
<p>가령, 아래와 같이 타입을 좁힌 후 값이 변경될 가능성이 있기 때문에 다른 스코프의 타입 좁히기는 언제나 보장하지 않는다. </p>
<p><img src="https://velog.velcdn.com/images/dongha1992/post/76200de6-fd0c-495c-a8ea-1dc74cf78609/image.png"></p>
<p>가장 좋은 방법은 해당 값이 mutable 하지 않다는 것을 타입스크립트에게 알려주는 것이다. </p>
<p><img src="https://velog.velcdn.com/images/dongha1992/post/5387fef3-cf54-464d-992d-1499effae8e2/image.png"></p>
<p>참고: <a href="https://www.totaltypescript.com/">total typescript</a> </p></div></div>

삶도 재입학이 되나요?

타입스크립트 제대로 공부하며 배운 것을 정리 
1. literals to wider type
리터럴 타입과 wider type을 함께 union으로 사용하는 경우다. 이렇게 되면 string 타입이 더 큰 집합을 가지기 때문에 다른 리터럴 타입들이 적용되지 않는다. 
이렇게 되면 자동완성에도 리터럴 타입이 나오지 않는다. 
이를 해결하기 위해 아래처럼 string & {} 를 추가해준다. string 타입의 객체임을 명시하면서 타입스크립트 컴파일러의 유니언 타입에서 타입 축소를 방지한다고 한다(정확한 원리는 모르겠음)
그럼 아래처럼 자동완성이 잘 나오게 된다.
2. map hasn't narrow map.get()
위 상황처럼 타입 narrowing을 통해 Map 의 에러에 접근하려고 한다. 하지만 error 객체를 찾지 못하는 타입 에러를 뱉는다. 
이유는 타입스크립트는 Map.has()와 Map.get()의 관계성을 이해하지 못하기 때문이다.
이를 해결하기 위한 좋은 방법은 Map.get()으로만 타입 좁히기를 사용하는 것
3. narrowing unknown type
unknown 타입의 타입 좁히기를 해서 id를 return 해야하는 상황이다. value의 타입을 좁혔지만 여전히 data의 타입이 unknown인 상태다
이를 해결하기 위해서는 id 타입까지 타입 좁히기를 해줘야 한다.
이렇게까진 타입스크립트를 사용한 적이 없어서 반성했다...
4. narrowing different scope
searchParams 를 타입 좁히기한 상황이다. 하지만 여전히 searchParams.name에서 에러가 나오는 상황이다 (실무에서도 이런 경우가 좀 있었던 거 같다) 
이러한 문제가 발생한 이유는 타입 좁히기는 타입 좁히기가 다른 스코프를 커버하지 않기 때문이다.
가령, 아래와 같이 타입을 좁힌 후 값이 변경될 가능성이 있기 때문에 다른 스코프의 타입 좁히기는 언제나 보장하지 않는다. 
가장 좋은 방법은 해당 값이 mutable 하지 않다는 것을 타입스크립트에게 알려주는 것이다. 
참고: total typescript

Total Typescript - Unions and Narrowing

댓글