[이펙티브 타입스크립트+2] 타입스크립트 설정 (noImplicitAny / strictNullChecks)

https://www.typescriptlang.org/tsconfig

1장 타입스크립트 알아보기
아이템 2 | 타입스크립트 설정 이해하기

3줄 요약
1. 타입스크립트 컴파일러는 매우 많은 설정을 가지고 있다.
2. 암시적 any 타입을 피하기 위해 noImplicitAny 설정을 고려하자. 사실상 필수다.
3. 엄격한 타입 체크를 원한다면 strict 설정을 고려하자. 사실상 필수다.

참고) 이펙티브 타입스크립트는 타입스크립트의 기본 그 이상을 다룹니다.

---

아시다시피 타입스크립트에서는 수많은 설정이 있습니다.
그리고 보통 tsconfig.json 파일을 만들어 타입스크립트 컴파일러 옵션을 설정합니다. 

nestjs 프로젝트 셋업 시 기본 tsconfig.json

cra로 만든 react 프로젝트의 기본 tsconfig.json

타입스크립트 설정을 어떻게 하느냐에 따라 완전히 다른 언어가 될 수 있습니다.
따라서, 타입스크립트 컴파일러 설정을 어떻게 하는지 이해하는 것이 중요합니다.
그중 noImplicitAny와 strickNullChecks를 알아보도록 해보겠습니다.

# noImplicitAny

먼저 해당 설정을 끄고 간단한 add 함수를 구현해보겠습니다.

해당 설정을 false로 만들었습니다.

에러가 나지않습니다. 평온합니다.

함수를 구현했을 때, 에러가 나지 않습니다. 마치 순수 자바스크립트 코드처럼 보입니다.
그러면 이제 해당 설정의 값을 true로 만들고 다시 구현해보도록 하겠습니다.

해당 설정을 true로 만들었습니다.

아까와는 다르게 빨간색으로 밑줄이 표시되고 파라미터 a가 'any' 타입을 가지고 있다고 합니다.

add함수의 파라미터인 a, b 부분에 에러가 납니다.
에러의 이유는 파라미터인 a가 암묵적으로 any 타입을 가지고 있어서입니다.

noImplicitAny는 암묵적으로 any 타입을 가지는 것을 허락하지 않습니다.
any타입은 타입 체커를 무력화하기 때문에 사용을 지양해야 합니다.

noImplicitAny를 false로 설정해야 하는 경우는
기존 자바스크립트 프로젝트를 타입스크립트로 마이그레이션하는 경우입니다.
해당 경우를 제외한다면, 가능한 noImplicitAny 옵션을 true로 설정하는 것이 좋습니다.

# strickNullChecks

해당 설정을 끄고 number 타입의 변수에 null을 할당해보겠습니다.

해당 설정을 false로 만들었습니다.

x3을 제외한 변수 x1, x2에는 정상적으로 null과 undefined가 할당되었습니다.

number 타입의 변수에 null과 undefined 정상적으로 할당되는 것을 볼 수 있습니다.
엄격하게 타입 체크를 하지 않는 것을 확인할 수 있습니다.
이번에는 해당 설정을 true로 만들어보겠습니다.

해당 설정을 true로 만들었습니다.

x1, x2, x3 모두 에러가 납니다.

이제야 엄격히 타입 체크를 하는 것을 볼 수 있습니다.
이 옵션을 true로 설정했을 경우, 코드를 작성하면서 null 체크 혹은 단언 문을 추가해야 하는 경우가 많습니다.
물론 귀찮은 작업들이긴 하지만 런타임에서 오류가 나는 것을 방지해주는 좋은 설정입니다.

strict으로 시작하는 설정들이 몇몇 있습니다.
이러한 설정들을 모두 true로 설정하는 것이 좋습니다.
엄격한 체크를 통해서 안전한 코드를 작성할 수 있도록 도와주기 때문입니다.

안전한 코드 작성을 위해 strict 설정을 true로 하는 것이 좋습니다.

 

Materials From
1. <이펙티브 타입스크립트>(댄 밴더캄 지음, 장원호 옮김, 인사이트 2021)
2. 타입스크립트 공식 홈페이지 | https://www.typescriptlang.org/ 

Typed JavaScript at Any Scale.