[Typescript] tsconfig.json 옵션들[03]

“strict”

이 옵션을 true 로 하면 아래 사진처럼 strict 아래 다른 옵션들을 하나하나 true로 한설정과 같은 결과이다.

아래를 일일이 설정하는경우는 분명히 false를 설정할때가 있기때문이다.

그러면 이 옵션은 무엇을 설정 하는것인가?

 

“noImplicitAny”

noImplicitAny는 더나은 코드를 작성하는데 도움을 주는 흥미로운 옵션이다.

 

다음과 같이 data를 인자로 받고 콘솔로그로 출력하는 함수를 만들었고 ‘The data’ 라는 string 문자열을 인수로 넘겨주었다. 하지만 다음과 같이 any type으로 에러가 뜨는걸 알수있는데 이게 noImplicitAny 옵션이다.

매개변수로 넘겨주는 값이 어떤 타입인지 명확히 알리지 않았기 때문에 타입스크립트가 어떤 정보인지 알수없어서 추론하지 못한다. 그럼 언제 타입스크립트가 추론을 할까? 함수가 먼저 선언되기때문에 인수로 ‘The data’ 를 넘겨줄때는 그 후이기때문에 함수가 생성되는 시점에는 어떤 결과가 나타날지 알수없다.

→이말을 자세히 알아야할게 타입스크립트가 그 결과를 미리 추론하여 알수없는것이지 콘솔로그가 브라우저에서 출력안된다는건 아니다. 실제로 브라우저에서 콘솔로그는 출력된다(바닐라자바스크립트)

따라서 strict을 true로 두고 noImplicitAny 를 false로 할경우 두번째 스샷처럼 에러가 사라진다.

이럴때 보통 우리는 매개변수에 타입을 지정해준다.

“strictNullChecks”

버튼이 작동할수있도록 느낌표(!) 를 추가해줘야 에러가 발생하지 않는데 이부분을 설정할수있는게 strictNullChecks 이다. 만약 이걸 false로 설정하면 느낌표! 없이도 에러가 생기지 않게된다.

따라서 선택한게 Null 일지 아닐지 좀더 엄격하게 설정하고싶을때 사용하는거다.

 

button 경우에도 querySelector를 사용할지라도 실행되는 페이지에서 버튼이 없을수도 있기때문에 이것을 타입스크립트가 엄격하게 관리하는것이다. 만약 index.html에 button 태그가 없다면 결국 Null 이기 때문이다.

따라서 만약 strictNullChecks를 false로 한다면 html을 살펴보지 않으므로 성공여부를 타입스크립트가 판단할수없다.

따라서 button이 null 값을 가질 수 있으므로 이 코드에 문제가 생긴다.

 

따라서 true로 설정하여 이러한 문제를 방지할수있다.

왜냐하면 개발자가 직접 이 button은 존재하고 null값을 반환하는게 아니라고 !연산자를 통해 알려주기때문이다.

만약 작동할지 여부를 알수없는데 작동되기를 원한경우 if문을 통해 null이 아닐경우 실행되게하면 에러, 빨간줄없고 런타임에서도 에러가없는걸 볼수있다.

따라서 이렇게 하면 if문을 통해 타입스크립트가 null인지 아닌지를 판별할수있기 때문에 에러없이 잘되지만 분명하게 button이 존재하는지을 알기때문에 ! 을 쓴다면 코드양을 줄일수있으므로 아주 좋은 옵션이다.

“alwaysStrict”

이 옵션의 경우 strict 모드를 사용할경우 자바스크립트 파일에 ‘use strict’ 문자열을 항상 추가되도록 설정하는 옵션이다.

“noUnusedLocals”

만약 함수안에 지역변수를 선언을 하고 사용하지 않는다면 아무표시를 하지않지만 이 noUnusedLocals를 true로 해주면 아래와같이 노란색 밑줄로 사용하지 않는다고 경고와 함께 사용하지않는 변수에 대해서 타입스크립트가 에러로 처리하도록 설정해주는것이다. 자세히 봐야할건 locals 라는것 전역이 아닌 지역 이다.

“noUnusedParameters”

마찬가지로 매개변수로 넘겨준 값이 사용되지 않는다면 이 noUnusedParameters를 true 로 설정하면 노란 밑줄과 함께 에러로 판단하여 보여준다.

따라어 이 두가지의 옵션을 통해 무의미하게 사용하는 지역변수나 매개변수를 사전에 알려주기때문에 일일이 후반부에 찾아가면서 수정하지않고도 삭제하거나 사용하여 코드량과 효율성을 높일수있다.

“noImplicitReturns”

이 설정은 함수에서 if문을 통과할때 return 하는 경우 해당조건에 만족하지않아 return 이 없는경우 반환되는게 없기때문에 이를 감지하여 조건문을 통과하지않더래도 무조건 return 이 있어야한다는 걸 타입스크립트가 판별하도록 해준다. 이때 조건문에 console.log 나 return; 같은경우는 반환하는게 없기때문에 조건문 밖에 return이 없어도 에러로 뜨지않는다.

만약 return 문이없다면 상관없지만 return 하는 경우가 하나라도 있는 경우에는 무언가를 반환하도록 해야한다.