[TS] Typescript 컴파일러2

본 포스팅은 Maximilian Schwarzmüller 님의 강의를 바탕으로 작성되었습니다.

 

strict 옵션

strict옵션이 켜져있으면 모든 strict 개별 옵션을 체크한다는 뜻이다.

개별 옵션을 각각 false로 설정하거나, 모든 옵션을 true로 하거나.

 

strict - noImplicitAny

함수의 인자는 타입을 명시하지 않으면 에러를 발생시킨다. 하지만 변수의 경우에는 any 타입으로 추론된다. 왜 그럴까? 변수의 경우에는 '미리' 선언되기 때문에 any 타입으로 추론되지만, 함수의 인자는 '미리' 선언될 수 없기 때문에 타입스크립트가 any로 추론하면서 동시에 에러를 발생시키는 것이다. 이런 경우 에러를 유발시키지 않고 any로 추론하게 만들기 위해서는 strict 옵션중 noImplicitAny 옵션은 false로 설정하면 된다.

any로 추론하며, 에러를 발생시키지 않는다.

 

strict - strictNullChecks

이전 포스팅에서 dom객체를 찾을 때 해당 객체가 NULL을 반환할 수도 있어서 에러가 발생한 것을 기억하는가?

그런 체크를 해제할 수도 있다. strict옵션의 strictNullChecks를 false로 설정하면 된다.

null값을 잠재적으로 가질 수 있는 값에 접근하고 작업하는 방식을 타입스크립트에게 매우 엄격하게 말해준다.

타입스크립트는 html파일을 확인하지 않으므로 해당 버튼의 존재 유무를 판단할 수 없다. dom노드에 포인터를 반환하지 못하면 null을 반환한다. 따라서 button이 null값을 가질 수 있으므로 이 코드에 문제가 생긴다.

 

이런 경우를 피하기 위해서 strictNullChecks를 true로 설정하는 것이다.

 

우리가 dom객체를 찾는 함수에 느낌표를 붙이는 것은 해당 값이 꼭 있거나, Null이 아니라는 것을 명시하는 것이다. 또한, 더욱 정확한 구동일 위해서 button.addEventListener 구문을 if문 안에 넣어서 런타임 중에도 체크하게 만든다.

 

noUnusedLocals

사용하지 않은 지역 변수나 전역 변수를 원하지 않을 경우 noUnusedLocals를 활성화(true)하여 에러를 발생시킨다.

 

그러면 왜 appId는 에러를 발생시키지 않을까? 이유는 다음과 같다. 타입스크립트는 해당 변수를 전역변수로서 다른 타입스크립트 파일이 사용할 수도 있다고 생각하기 때문이다.

이와 비슷한 옵션으로는 다음과 같다.

1. noUnusedParameters : 사용되지 않는 매개변수가 있으면 에러를 발생시킨다.

2. noImplicitReturns : 함수가 return을 하지 않는 경우가 있으면 에러를 발생시킨다.

 

VS Code로 디버깅하기

ESLint, prettier을 설치하면 편하다.

그리고, 디버깅을 위해 tsconfig.json 파일의 sourceMap 옵션을 true로 설정하자.

F5를 눌러 디버깅을 시작하면 localhost:3000의 서버가 열릴 것이다. 이제 디버깅 해보자. app.ts의 clickHandler의 console.log 구문에 중단점을 설정하고 버튼을 클릭하면 다음과 같이 코드가 일시중지 될 것이다.

중단점을 설정하고 click me를 누르니 이렇게 된다.

이제 여기서 파일을 살펴보고, 이 키워드나 메세지 변수, 입력되어있는 스크립트 객체와 전역 객체에 접근할 수 있는 전역 변수에 대한 로컬 값을 검사할 수 있다.

 

추가로, sourceMap의 활성화로 생성되는 map파일은 자바스크립트 파일과 타입스크립트 파일 간의 디버거를 이어주는 역할을 한다.