[TypeScript] tsconfig.json 의 엄격한 타입 체킹 옵션 (Strict Type-Checking Options)

/* Strict Type-Checking Options */
"strict": true, 
// "noImplicitAny": true,
// "strictNullChecks": true,
// "strictFunctionTypes": true,
// "strictBindCallApply": true,
// "strictPropertyInitialization": true,
// "noImplicitThis": true,
// "alwaysStrict": true,

"strict": true 옵션은, 아래의 주석 처리된 옵션들을 모두 활성화한 것과 같은 옵션이다.
이 옵션은 타입스크립트가 보다 엄격하게 타입을 체크할 수 있도록 돕기 때문에 "strict": true로 하고 개발을 하는 것이 좋다.

noImplicitAny

• "noImplicitAny": true 일 경우, 함수의 매개변수와 값에 타입이 지정되지 않았을 때 (즉, any) 컴파일 에러를 발생시킨다.

함수의 호출보다 함수의 선언이 먼저 오기 때문에, 함수 선언이 되는 시점에서 함수 sendAnalytics에게 전달되는 매개변수의 타입은 알 수 없다. 그러므로 타입스크립트는 에러를 발생시킨다.

function sendAnalytics(data) { // data에서 에러
	console.log(data);
}

sendAnalytics('The data');

위의 경우, 매개변수의 타입을 지정하면 에러가 발생하지 않는다.

function sendAnalytics(data: string) { // 작동
	console.log(data);
}

sendAnalytics('The data');

참고: 변수는 타입이 지정되지 않았어도 에러가 발생하지 않지만, 매개변수가 타입이 지정되지 않으면 에러가 발생한다.

let logged; // logged 의 타입은 any라고 타입추론이 된다

function sendAnalytics(data: string) {
	console.log(data);
	logged = true; // 작동
  	console.log(logged); // boolean
}

sendAnalytics('The data');

strictNullChecks

• 잠재적으로 Null 이 될 수 있는 값들의 접근에 있어서 엄격하게 확인하는 옵션이다.
  • true 일 경우, 엄격하게 확인
  • false 일 경우, 해당 옵션 비활성화

“strictNullChecks”: true 일 경우, button이 실제로 있을 지 없을 지 알 수 없으므로 타입스크립트는 에러를 발생시킨다.

const button = document.querySelector('button');

button.addEventListener('click', () => { // 에러
	console.log('Clicked!');
});

• 만약 개발자가 버튼이 있다고 확신할 수 있는 경우, ! 연산자를 추가해서 Null 이 아님(즉, 값이 있음)을 확실하게 타입스크립트에게 말해준다면 에러가 발생하지 않는다.
• “strictNullChecks”: false 로 되어있을 경우, ! 가 없어도 에러가 발생하지 않는다.

const button = document.querySelector('button')!;

button.addEventListener('click', () => { // 작동
	console.log('Clicked!');
});

• 만약 개발자가 버튼이 있을지 없을지 확신할 수 없는 경우, if문 으로 버튼이 있을 때를 체크해주는 것이 좋다. → 이런 경우에는 ! 연산자가 필요하지 않다.

const button = document.querySelector('button');

if(button) {
	button.addEventListener('click', () => { // 작동
	console.log('Clicked!');
	});
}

noImplicitThis

• "noImplicitThis": true 로 설정하면, this 키워드가 무엇을 가리키는지 명확하지 않을 때 에러를 발생시킨다.

alwaysStrict

• 컴파일 후 생성된 자바스크립트 파일이 strict mode를 사용하도록 하는 옵션이다.

// app.js

'use strict'; // strict mode 사용

const button = document.querySelector('button');
button.addEventListener('click', () => {
	console.log('Clicked!');
});