[typescript] tsconfig.json

Tayou·2024년 9월 11일
post-thumbnail

오늘 타입스크립트를 개인적으로 공식문서를 통해 공부하다가 재미있는 사실을 발견하게 되어 공유하려 한다.

타입 스크립트의 옵션

아마 타입스크립트를 아주 조금만이라도 해본 사람이라면 알겠지만, .ts 확장자를 가진 파일을 tsc [파일명]을 입력하면, 해당 파일을 컴파일하여 자바스크립트 파일로 변환되어 지고 내부코드도 자바스크립트 형태로 변환이 된다. 이 때 타입스크립트로 하여금 컴파일 할 때 좀더 엄격한 문법검사를 적용할 수 있는 옵션들이 있다.

noImplicitAny

그 첫번째가 noImplicitAny 라는 옵션이다. 타입스크립트는 변수를 프로그래머가 할당할 때 명시적으로 타입을 설정한 경우도 있지만, 그렇지 않은 경우도 타입을 추론한다. 그런데 명시가 되어 있지도 않고 추론도 어려운 경우에는 Any 라는 사실상 모든 타입을 다 허용하는 타입을 해당 변수에 부여하게 된다.

즉, 이런 암묵적인 Any 타입의 허용을 막기 위해 존재하는 것이 noImplicitAny 라는 옵션이다.

사용 방법은 간단하다.

tsc --noImplicitAny [ 파일명 ]

위와 같이 타입 스크립트 컴파일러를 실행시킬 때 해당 옵션값을 넣어주기만 하면 된다.

strictNullChecks

기본적으로 타입스크립트라 하더라도 모든 타입의 변수에 null이나 undefinded 값이 할당될 수 있다. 필자의 경우 타입스크립트나 자바스크립트 경험이 현재까지 그리 많지는 않아 체감한 적은 많이 없으나, nullundefinded 값의 무분별한 대입으로 생기는 에러가 상당히 많다고 한다. 이를 방지 위해 존재하는 옵션으로 볼 수 있겠다.

사용법 또한 아까 noImplicitAny와 동일하며, 옵션명만 변경시켜주면 된다.

strict

위의 두 옵션과 더불어 모든 엄격한 문법적용을 하게 하는 옵션이 있었으니 바로 strict 이다. 해당 옵션을 사용하면 위의 두 가지 경우에 대한 옵션이 모두 한방에 적용된다고 보면된다.

그렇다면, 옵션들을 항상 기입하기 귀찮은데 별다른 기입없이 항상 적용하게 하는 방법은 없을까?

당연히 있다.

tsconfig.json

tsconfig.json 파일을 사용하면 된다. 그래서 필자도 한번 사용해 보았다.

#tsconfig.json

{
    "compilerOptions": {
        "strict": true,
        "noEmitOnError": true
    }
}

위와 같이 tsconfig.json 파일을 작성하고 아래의 타입스크립트 코드를 컴파일해 보았다.

//union.ts

function printId(id: number | string) {
    console.log("Your ID: " + id);
}

printId(101);
printId("202");
printId({ myID: 22342 });

보는 바와 같이 printId 함수는 숫자와 문자열만 매게변수로 받는 함수로 printId({ myID: 22342 }); 이 코드에 의해 에러를 발생시키게 된다. 이는 noEmitOnError 컴파일 옵션에 의해 자바스크립트 파일을 컴파일러가 생성하지 않을 것을 기대하였다. 하지만 결과는 어땠을까?

보는 바와 같이 에러를 발생시키는 코드임에도 컴파일러가 자바스크립트 코드를 생성하였다. 즉, 설정값이 적용이 안된 것이다.

tsc의 작동원리와 그 이유

알아보니, tsconfig.json 파일에 작성된 내용이 적용이 안된 이유는 다음과 같았다.

  • tsc [ 파일명 ]은 특정 파일들을 빠르게 컴파일할 때 사용하기 위한 방법으로 이렇게 컴파일 명령을 실행하게 되면 tsconfig.json 설정은 무시된 채 기본 컴파일 설정값이 적용된다.
  • 따라서 파일명과 함께 컴파일할 경우 적용하고자 하는 옵션을 별도로 기입해주어야 한다.
  • 또한, tsconfig.json 파일의 설정값을 컴파일 할때 적용하고자 하는 경우 tsc만 입력하여 컴파일하도록 한다.

즉, 원인은 tsc 컴파일 명령어의 작동 원리에 있었다. 따라서, 해당 방식대로 적용해 보았다.
보는 바와 같이 tsc 명령어만 사용할 경우 tsconfig.json 파일의 설정값이 적용되어 union.js 파일을 생성하지 않았음을 알 수 있다.

profile
집요함과 호기심으로 문제를 해결하는 Tayou입니다.

0개의 댓글