TypeScript 설정 이해하기(tsconfig: noImplicitAny, strict NullChecks)

1. TypeScript 설정 이해하기

타입스크립트 컴파일러는 언어의 핵심 요소에 영향을 미치는 몇 가지 설정을 포함하고 있다.

 

다음의 코드가 오류 없이 타입 체커를 통과할 수 있을까?

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

add(10, null);

 

이 질문에는 ts 설정이 어떻게 되어있는지 알아야 정확히 답할 수 있다.

 

타입스크립트 컴파일러에는 100 가까이 되는(또는 그 이상의)  설정 옵션이 존재하며 이 설정은 커맨드 라인과 tsconfig.json 설정 파일을 통해 사용할 수 있다.

 

$ tsc --noImplicitAny program.ts

커맨드라인에서 사용하기

 

{
	"compilerOptions": {
    	"noImplicitAny": true
    }
}

tsconfig.json에서 사용하기

 

혼자 작성할 프로그램이 아니라면 타입스크립트를 어떻게 사용할 계획인지 동료나 다른 도구들도 알 수 있도록 하려면 tsconfig.json 설정 파일을 사용하는 것이 좋다. 설정파일은 tsc --init을 실행하면 생성할 수 있다.

 

타입스크립트의 설정은 어디서 소스 파일을 찾을지, 어떤 종류의 출력을 생성할지 제어하는 내용이 대부분이며, 언어 자체의 핵심 요소들을 제어하는 설정도 할 수 있다.

 

이러한 옵션들을 어떻게 설정하느냐에 따라서 타입스크립트는 완전히 다른 언어처럼 사용될 수 있다.

 

이 설정들을 제대로 사용하려면 noImplicitAny와 strictNullChecks를 이해해야 한다.

 

2. noImplicitAny 설정하기

noImplicitAny는 변수들이 미리 정의된 타입을 가져야 하는지 여부를 제어한다.

 

다음 코드는 noImplicitAny가 해제되어 있을 때 유효하다.

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

 

 

IDE에서 add 부분에 마우스를 올려 보면 타입스크립트가 추론한 함수의 타입을 알 수 있다.

function add(a: any, b: any): any

 

any 타입을 매개변수에 사용하면 타입 체커는 속절없이 무력해지므로, any는 매우 주의해서 사용해야 한다.

function add(a, b) {
         // ~    'a' 매개변수에는 암시적으로 'any' 형식이 포함됩니다.
         //   ~  'b' 매개변수에는 암시적으로 'any' 형식이 포함됩니다.
	return a + b;
}

any를 코드에 넣지 않았지만, any 타입으로 간주되므로 '암시적 any'가 된다.

 

반면 같은 코드를 noImplicitAny 설정된 타입스크립트에서 작성한다면 오류가 발생한다.

명시적으로 any로 설정하거나 a: number, b: number와 같이 분명한 타입을 적어주면 해결할 수 있다.

 

타입스크립트는 타입 정보를 가질 때 가장 효과적이기 때문에 되도록 noImplicitAny 설정을 해주는 것이 좋다.

그러면 타입스크립트가 문제를 발견하기 수월해지고, 코드의 가독성이 좋아지며, 개발자의 생산성이 향상된다.

 

자바스크립트로 작성된 기존 프로젝트를 타입스크립트로 마이그레이션한다면 이 설정을 해제하여 사용할 수 있다.

 

3. strictNullChecks 설정하기

strictNullChecks는 null과 undefined가 모든 타입에서 허용되는지 확인하는 설정이다.

 

다음은 strictNullChecks가 해제되었을 때 유효한 코드이다.

const x: number = null;

 

그러나 strictNullChecks를 설정하면 오류가 된다.

const x: number = null;
   // ~ 'null' 형식은 'number' 형식에 할당할 수 없습니다.

 

null 대신 undefined를 써도 같은 오류가 난다. 이를 허용하기 위해서는 의도를 명시적으로 드러내야 한다.

 

const x: number | null = null;

 

strictNullChecks는 null과 undefined 관련 오류를 잡아 내는 데 많은 도움이 되지만, 코드 작성이 어려워질 수 있다.

새 프로젝트를 시작한다면 가급적 strictNullChecks를 설정하는 것이 좋지만 자바스크립트 코드를 마이그레이션하는 중이라면 사용하지 않아도 된다. 그러나 strictNullChecks 설정 없이 개발하다 보면 'undefined는 객체가 아닙니다' 등의 런타임 에러를 보게 될 수도 있으니 주의해야 한다. 프로젝트가 커질수록 설정 변경은 어려워지므로 가능한 한 초반에 설정해 두는 것이 좋다.

 

strictNullChecks를 설정하려면 noImplicitAny를 먼저 설정해야 한다.

 

이 모든 체크를 설정하고 싶다면 strict 설정을 해주면 된다. 타입스크립트에 strict 설정을 하면 대부분의 오류를 잡아낼 수 있다.

 

공동 프로젝트 도중 동일한 타입스크립트 코드에 동일한 오류가 나타나지 않는다면 컴파일러 설정이 동일한지 먼저 체크해봐야 한다.