<div id="readability-page-1" class="page"><div><blockquote>
Typescript document의 <a href="https://www.typescriptlang.org/docs/handbook/2/narrowing.html">Narrowing</a> 파트를 참고하였다.
</blockquote>
<img src="https://media.vlpt.us/images/jujube0/post/3b7b8456-1f07-4602-8369-77bee7dca822/A21C2F8F-FFF1-4423-9F20-7FE2D158EFD9.png">
위의 코드에서 <code>padding</code> 이라는 변수에 주목하자. <code>padding</code>은 number 또는 string 값을 갖는 유니언 타입으로 선언되었는데, 실제 함수 내에서는 <code>padding: number</code>, <code>padding: string</code> 처럼 하나의 타입으로만 판단된다.
이는 typeof 라는 특별한 명령어를 이용하여 <code>padding</code> 변수의 타입을 좁혀준 결과이다. 이렇듯 추가적인 타입 체크나 할당을 이용하여 변수의 타입을 좀 더 작은 범위로 좁혀주는 것을 Narrowing 이라고 한다.

<h2 id="typeof">typeof</h2>
<code>typeof</code> 오퍼레이터는 변수의 타입 정보를 string으로 return해준다.
<blockquote>
<code>typeof</code> 가 리턴값으로 가질 수 있는 타입들은 다음과 같다(모두 string type으로 return됨을 기억하자)
</blockquote>
<ul>
<li><code>string</code></li>
<li><code>number</code></li>
<li><code>bigint</code></li>
<li><code>boolean</code></li>
<li><code>symbol</code></li>
<li><code>undefined</code></li>
<li><code>object</code></li>
<li><code>function</code></li>
</ul>
참고로 <code>typeof null</code>은 <code>"object"</code>를 리턴한다. 주의하자.
<h2 id="truthiness-narrowing">truthiness narrowing</h2>
javascript에서 조건문으로 사용할 수 있는 것에는 <code>&amp;&amp;</code>, <code>||</code>, <code>if</code>, <code>!</code> 등이 있다.
보통 조건문의 condition 항목에는 true 또는 false 값을 갖는 <code>boolean</code>이 들어가게 되는데, 만약 boolean이 아니라면 해당 값을 boolean으로 형변환을 시키게 된다.
<blockquote>
<code>false</code> 로 변환되는 값들
</blockquote>
<ul>
<li><code>0</code></li>
<li><code>NaN</code> (Not a Number)</li>
<li><code>0n</code> (the <code>bigint</code> version of zero)</li>
<li><code>undefined</code></li>
<li><code>""</code> (empty string) 
위의 값들을 제외한 나머지 값들은 모두 <code>true</code>로 간주된다.</li>
</ul>
이런식으로 Boolean 으로 형변환하는 것은 
<img src="https://images.velog.io/images/jujube0/post/33405053-b206-40a2-836e-1920f7ef1140/image.png">
<ul>
<li>Boolean 함수 또는 (<code>!!</code>) 를 이용하여 값을 Boolean으로 변환할 수 있다. 
**둘의 차이점은, ** Boolean 함수는 boolean type이지만 <code>!!</code>는 literal type(<code>true</code>)을 갖는다는 것이다.</li>
</ul>
<blockquote>
<ul>
<li>moreRef- stack overflow : <a href="https://stackoverflow.com/questions/784929/what-is-the-not-not-operator-in-javascript">What is the !! operator in JS?</a></li>
</ul>
</blockquote>
<hr>
<img src="https://media.vlpt.us/images/jujube0/post/14c0f282-5eea-45ef-bb8f-0b70252be567/image.png">
그렇다면, 글의 가장 처음에서 만난 <code>printAll</code> 함수에 이렇게 적용이 가능하다. 이 경우, <code>string[]</code> type 만 첫번째 <code>if</code> block에 들어가게 되면서 에러가 사라진다.
<blockquote>
✔︎ truthiness narrowing을 사용하면서 <code>0</code>이나 <code>empty string</code> 등 의도치 않은 것까지 필터링해버릴 수도 있다. primitive type을 쓸 때는 주의하도록 하자.
</blockquote>
<hr>
<h2 id="equality-narrowing">Equality Narrowing</h2>
<img src="https://media.vlpt.us/images/jujube0/post/41c27792-f7a9-4ae0-8505-dbe76265c378/31CE01B6-E1EE-462A-9B7A-CA7EF09D307F.png"> 
<code>x === y</code> 라면, x와 y의 값이 같은 것은 물론이고, type또한 동일함을 의미한다. 이처럼 <code>===</code>, <code>!==</code>, <code>==</code>, <code>!=</code> 를 사용하여 **narrowing **을 할 수도 있다.
<blockquote>
<code>==</code> 는 <code>===</code> 보다는 조금 더 느슨하게 체크를 한다. <code>x == null</code> 은 <code>x === null || x === undefined</code> 의 의미와 동일하다.
</blockquote>
추가로
<ul>
<li><code>in</code></li>
<li><code>instanceof</code></li>
<li><code>assignment</code> 
<img src="https://media.vlpt.us/images/jujube0/post/1a16f1a6-259e-4b58-b11f-984492cf64db/46CDD5B4-7AD6-4777-8148-03ADCB1CCB8D.png"></li>
</ul>
<h2 id="type-predicates">type predicates</h2>
유저가 type-guard를 직접 정의할 수도 있다. 이를 위해서는 type predicate 의 리턴 타입을 갖는 함수를 정의해야 한다.
<img src="https://media.vlpt.us/images/jujube0/post/1118c9dd-12ff-43ce-a134-01a22f6d2567/image.png">
위 함수에서는 <code>pet is Fish</code> 가 type predicate가 된다.
<ul>
<li>type predicate의 형식은 <code>{parameter name} is {Type}</code>.</li>
<li><code>isFish</code>의 호출을 통해 narrowing이 가능하다.</li>
</ul>
<h2 id="never">never</h2>
narrowing을 진행하면서 고려하지 않은 사항들을 확인하기 위해 <code>never</code> type을 이용할 수 있다.
<code>never</code> 은 존재해서는 안되는 타입으로 모든 타입에 할당이 가능하다(하지만 <code>never</code> type에는 <code>never</code> 가 아니면 어떤 것도 할당이 불가하다).
<img src="https://media.vlpt.us/images/jujube0/post/9997a923-0258-4216-9936-f61064068b7d/image.png">
<code>never</code>를 사용한 예이다.
<ul>
<li>만약 <code>Shape</code> union에 <code>Triangle</code> 이라는 새로운 타입이 추가된다면, typescript는 에러를 감지한다.</li>
</ul></div></div>

jujube0

Typescript document의 Narrowing 파트를 참고하였다.
위의 코드에서 padding 이라는 변수에 주목하자. padding은 number 또는 string 값을 갖는 유니언 타입으로 선언되었는데, 실제 함수 내에서는 padding: number, padding: string 처럼 하나의 타입으로만 판단된다. 
이는 typeof 라는 특별한 명령어를 이용하여 padding 변수의 타입을 좁혀준 결과이다. 이렇듯 추가적인 타입 체크나 할당을 이용하여 변수의 타입을 좀 더 작은 범위로 좁혀주는 것을 Narrowing 이라고 한다.
Tools for Narrowing
typeof
typeof 오퍼레이터는 변수의 타입 정보를 string으로 return해준다. 
typeof 가 리턴값으로 가질 수 있는 타입들은 다음과 같다(모두 string type으로 return됨을 기억하자)
string
number
bigint
boolean
symbol
undefined
object
function
참고로 typeof null은 "object"를 리턴한다. 주의하자.
truthiness narrowing
javascript에서 조건문으로 사용할 수 있는 것에는 &&, ||, if, ! 등이 있다. 
보통 조건문의 condition 항목에는 true 또는 false 값을 갖는 boolean이 들어가게 되는데, 만약 boolean이 아니라면 해당 값을 boolean으로 형변환을 시키게 된다.
false 로 변환되는 값들
0
NaN (Not a Number)
0n (the bigint version of zero)
undefined
"" (empty string)
위의 값들을 제외한 나머지 값들은 모두 true로 간주된다.
이런식으로 Boolean 으로 형변환하는 것은 
Boolean 함수 또는 (!!) 를 이용하여 값을 Boolean으로 변환할 수 있다. 
둘의 차이점은, * Boolean 함수는 boolean type이지만 !!는 literal type(true)을 갖는다는 것이다. 
moreRef- stack overflow : What is the !! operator in JS?
그렇다면, 글의 가장 처음에서 만난 printAll 함수에 이렇게 적용이 가능하다. 이 경우, string[] type 만 첫번째 if block에 들어가게 되면서 에러가 사라진다.
✔︎ truthiness narrowing을 사용하면서 0이나 empty string 등 의도치 않은 것까지 필터링해버릴 수도 있다. primitive type을 쓸 때는 주의하도록 하자. 
Equality Narrowing
x === y 라면, x와 y의 값이 같은 것은 물론이고, type또한 동일함을 의미한다. 이처럼 ===, !==, ==, != 를 사용하여 *narrowing *을 할 수도 있다.
== 는 === 보다는 조금 더 느슨하게 체크를 한다. x == null 은 x === null || x === undefined 의 의미와 동일하다. 
추가로
in
instanceof
assignment
type predicates
유저가 type-guard를 직접 정의할 수도 있다. 이를 위해서는 type predicate 의 리턴 타입을 갖는 함수를 정의해야 한다. 
위 함수에서는 pet is Fish 가 type predicate가 된다. 
type predicate의 형식은 {parameter name} is {Type}.
isFish의 호출을 통해 narrowing이 가능하다.
never
narrowing을 진행하면서 고려하지 않은 사항들을 확인하기 위해 never type을 이용할 수 있다.
never 은 존재해서는 안되는 타입으로 모든 타입에 할당이 가능하다(하지만 never type에는 never 가 아니면 어떤 것도 할당이 불가하다). 
never를 사용한 예이다.
만약 Shape union에 Triangle 이라는 새로운 타입이 추가된다면, typescript는 에러를 감지한다.

Typescript : Narrowing

댓글