한 달

어느덧 Typescript 3.7이 배포된 지 한 달가량이 되었다. 여러 기능적인 면에서 많은 업데이트가 되었는데 그중 가장 많이 또 만족스럽게 사용 중인 Optional Chaining, Nullish Coalescing을 소개하고자 한다.

Optional Chaining

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.

3.7로 업데이트 이후 가장 많이, 그리고 유용하게 사용하는 문법이다. 간단하게 말하자면 코드가 길어지는 객체 체크를 짧게 표현할 수 있도록 만들었다.

예를들어 하단과 같은 코드가 있을 때

type Abc = {
  abcContent?: {
    abcList?: {
      abcItems?: string[],
    }
  }
}
const abc: Abc = {
  // ...
};

하위에 있는 값에 접근하려면 기존에는 이렇게 체크를 해야 했었다.

// Before
if (abcContent && abcContent.abcList && abcContent.abcList.abcItems) {
  // ...
}

짧을 경우에는 상관이 없는데 보통은 그렇지가 않은 경우가 많다. 이것을 Optional Chaining이 정말 간단하게 만들었다!

// After - Optional Chaining
if (abcContent?.abcList?.abcItems) {
  // ...
}

또 이것을 실행에 대입하면

function getItem(items: string[], index: number): string | void {
  return items?.[index];
}
getItem(['a', 'b'], 1); // b
getItem([], 1); // undefined

이런 식으로도 사용할 수 있다.

주의할 점이 있다면 기존 객체 체크에서는 falsy값이 '', 0, NaN, false, null, undefined인 데 반면 ?.는 null, undefined라는 것이다.

Nullish Coalescing

Optional Chaining 과 비슷하게 ??를 사용해서 null, undefined를 확인하고 실행하는 문법이다.

|| 연산자와의 차이점은 falsy체크에 있다.

// ||
const test = foo || bar();

// same
const test =
  foo !== "" &&
  foo !== 0 &&
  foo !== NaN &&
  foo !== false &&
  foo !== null &&
  foo !== undefined
    ? foo
    : bar();

// ??
const test = foo ?? bar();

// same
const test = foo !== null && foo !== undefined ? foo : bar();

가끔은 ''처럼 빈값도 체크해야되는 경우가 있는데 그럴때 매우 유용한 문법이다.

그밖에

Node.js의 assert와 같은 Assertion Functions이나 Recursive Type Aliases 등이 추가되었으나 Optional Chaining, Nullish Coalescing 두 개만 해도 괄목할만한 업데이트라고 생각이 든다. (정말 많이 사용하게 될 터)

더욱 자세한 추가점은 릴리즈 노트를 참고하자.

3.7 Relese Note

VSCode에서 Typescript 3.7 인식이 안될 경우

VSCode를 사용한다면 Typescript 기본값이 3.6 버전대로 되어 있을 공산이 크다. (현재날짜 기준)

그럴 땐 간단하게 우측하단에 Typescript 버전을 클릭하여 작업영역 버전 사용을 하면 해결된다.

using-newer-typescript-versions