<div id="readability-page-1" class="page"><section data-astro-cid-4eu74nwj=""> <h2 id="한-달">한 달</h2>
어느덧 Typescript 3.7이 배포된 지 한 달가량이 되었다. 여러 기능적인 면에서 많은 업데이트가 되었는데 그중 가장 많이 또 만족스럽게 사용 중인 Optional Chaining, Nullish Coalescing을 소개하고자 한다.
<h2 id="optional-chaining">Optional Chaining</h2>
<blockquote>
At its core, optional chaining lets us write code where TypeScript can immediately stop running some expressions if we run into a null or undefined.
</blockquote>
3.7로 업데이트 이후 가장 많이, 그리고 유용하게 사용하는 문법이다. 간단하게 말하자면 코드가 길어지는 객체 체크를 짧게 표현할 수 있도록 만들었다.
예를들어 하단과 같은 코드가 있을 때
<pre tabindex="0" data-language="ts"><code>type Abc = {
 abcContent?: {
 abcList?: {
 abcItems?: string[],
 }
 }
}
const abc: Abc = {
 // ...
};</code></pre>
하위에 있는 값에 접근하려면 기존에는 이렇게 체크를 해야 했었다.
<pre tabindex="0" data-language="ts"><code>// Before
if (abcContent &amp;&amp; abcContent.abcList &amp;&amp; abcContent.abcList.abcItems) {
 // ...
}</code></pre>
짧을 경우에는 상관이 없는데 보통은 그렇지가 않은 경우가 많다.
이것을 Optional Chaining이 정말 간단하게 만들었다!
<pre tabindex="0" data-language="ts"><code>// After - Optional Chaining
if (abcContent?.abcList?.abcItems) {
 // ...
}</code></pre>
또 이것을 실행에 대입하면
<pre tabindex="0" data-language="ts"><code>function getItem(items: string[], index: number): string | void {
 return items?.[index];
}
getItem(['a', 'b'], 1); // b
getItem([], 1); // undefined</code></pre>
이런 식으로도 사용할 수 있다.
주의할 점이 있다면 기존 객체 체크에서는 <code>falsy</code>값이 <code>'', 0, NaN, false, null, undefined</code>인 데 반면 <code>?.</code>는 <code>null, undefined</code>라는 것이다.
<h2 id="nullish-coalescing">Nullish Coalescing</h2>
Optional Chaining 과 비슷하게 <code>??</code>를 사용해서 <code>null, undefined</code>를 확인하고 실행하는 문법이다.
<code>||</code> 연산자와의 차이점은 <code>falsy</code>체크에 있다.
<pre tabindex="0" data-language="ts"><code>// ||
const test = foo || bar();

// same
const test =
 foo !== "" &amp;&amp;
 foo !== 0 &amp;&amp;
 foo !== NaN &amp;&amp;
 foo !== false &amp;&amp;
 foo !== null &amp;&amp;
 foo !== undefined
 ? foo
 : bar();</code></pre>
<pre tabindex="0" data-language="ts"><code>// ??
const test = foo ?? bar();

// same
const test = foo !== null &amp;&amp; foo !== undefined ? foo : bar();</code></pre>
가끔은 <code>''</code>처럼 빈값도 체크해야되는 경우가 있는데 그럴때 매우 유용한 문법이다.
<h2 id="그밖에">그밖에</h2>
Node.js의 assert와 같은 Assertion Functions이나 Recursive Type Aliases 등이 추가되었으나 Optional Chaining, Nullish Coalescing 두 개만 해도 괄목할만한 업데이트라고 생각이 든다.
(정말 많이 사용하게 될 터)
더욱 자세한 추가점은 릴리즈 노트를 참고하자.
<a href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html" rel="noopener noreferrer" target="_blank">3.7 Relese Note</a>
<h2 id="vscode에서-typescript-37-인식이-안될-경우">VSCode에서 Typescript 3.7 인식이 안될 경우</h2>
VSCode를 사용한다면 Typescript 기본값이 3.6 버전대로 되어 있을 공산이 크다. (현재날짜 기준)
그럴 땐 간단하게 우측하단에 Typescript 버전을 클릭하여 작업영역 버전 사용을 하면 해결된다.
<a href="https://code.visualstudio.com/docs/typescript/typescript-compiling#_using-newer-typescript-versions" rel="noopener noreferrer" target="_blank">using-newer-typescript-versions</a> </section></div>

lannex

Shin, SJ

Typescript 3.7 업데이트 후 필수가 되어버린 문법

Optional Chaining, Nullish Coalescing

댓글