TS 설정 이해하기

아래의 코드는 오류 없이 타입 체커를 통과할 수 있을까요?

function add(a, b) {
  return a + b;
}

add(10, null);

사실, 이건 설정이 어떻게 되어있으냐에 따라서 정답이 달라지는 문제입니다. TS 컴파일러는 무수한 설정을 갖고있습니다. 이는 CLI를 통해서, 또는 tsconfig.json 파일을 통해서 이루어질 수 있죠.

최초의 설정파일은 아래 CLI 명령으로 간단하게 생성할 수 있습니다.

tsc --init

여기서는 100개가 넘는 TS 컴파일러의 설정들을 모두 짚고 넘어가지는 않을 겁니다. 대부분은 어디서 소스파일을 찾을지, 어떤 종류의 출력을 생성할지에 대해 제어하는 내용입니다.

반면, 언어 자체의 핵심 요소들을 제어하는 설정도 있는데, 대부분의 언어에서는 이를 허용하지 않는 고수준 설계의 설정입니다. 이를 어떻게 설정하느냐에 따라 완전히 다른 언어처럼 느낄 수도 있죠.

설정을 제대로 이해하려면 noImplicitAny와 strictNullChecks 설정에 대해 이해해야 합니다.

noImplicitAny

noImplicitAny는 변수들이 미리 정의된 타입을 가져야 하는지에 대한 여부를 제어합니다. 즉, 이를 설정할 경우 모든 변수들에 대해 직접 지정해주지 않는 한, any 타입을 허용하지 않습니다. 가급적 해당 설정은 기본적으로 가져가는 것이 좋습니다. 타입스크립트는 타입 정보를 가질 때 가장 효과적이기 때문이죠. 한 가지 예외라면, 기존에 JS로 작성되어 있던 프로젝트를 TS로 마이그레이션 해나가는 과정에서는 필요할 수도 있죠. 이 부분에 대해서는 추후에 다시 다뤄보도록 하겠습니다.

strictNullChecks

strictNullChecks는 null과 undefined가 모든 타입에서 허용되는지 확인하는 설정입니다. 이 경우, string | null과 같이 명시적으로 해당 변수가 null 타입이 될 수 있음을 알려주지 않으면, 에러가 발생합니다.

이러한 경우, 다음과 같은 Null Checking이나 Assertion이 필요하게 됩니다.

// Null Check
if (el) {
  el.textContent = 'Ready';
}

// Type Assertion
el!.textContent = 'Ready';

해당 설정은 null과 undefined에 관련된 오류를 잡아 내는 데에 많은 도움을 주지만, 코드 작성이 비교적 어려워집니다. 프로젝트를 처음 생성한다면 이를 설정하는 것이 좋지만, JS 코드를 마이그레이션 해나가는 과정이라면 설정하지 않아도 괜찮습니다. strictNullCheck를 설정하려면 noImplicitAny를 먼저 설정해야 합니다.

해당 설정이 필요한 이유는, 이것이 없을 경우 "undefined가 객체가 아닙니다"라는 끔찍한 런타임 오류를 매번 마주할 수 있기 때문입니다. 프로젝트가 커질 수록 이러한 부분들이 훨씬 까다로워지기 때문에, 가능한 초기에 설정하는 것이 좋습니다.

그 밖에 언어에 의미적으로 영향을 미치는 설정(noImplicitThis, strictFunctionTypes)이 많지만, 앞의 두 설정만큼이나 중요한 것은 없습니다. 이 모든 타입 체크들을 설정하여 엄격한 환경 내에서 개발을 하고싶다면, strict를 설정하면 됩니다. 이 경우 대부분의 에러를 잡아냅니다.