[Type Script] tsconfig.json

타입스크립트를 사용하면, tsconfig.json 파일로 컴파일과 관련된 사항을 구성한다.

컴파일러는 필요할 때 자동으로 호출된다.

• 개발 서버 구동시킬 때
• 프로젝트 빌드해 앱을 만들 때
  빌드는 설정된 순서대로 백그라운드에서 진행되고, 타입스크립트 컴파일러도 빌드 과정에서 사용된다.

이 파일로 컴파일을 설정할 수 있는데, 설정에는 다양한 옵션이 사용된다.

• 공식 문서 참고 ^^~
• 아니면 마우스 오버해보면 간단한 설명 볼 수 있다.

설정 옵션 중 핵심 내용 살펴보기

include

컴파일 할 타입스크립트의 파일이 있는 디렉터리를 지정하는 속성이다.

• include 배열에 js로 컴파일하고 싶은 ts파일이 든 디렉터리 이름을 넣으면 된다.

target

이 옵션은 타입스크립트로 작성한 코드를 어떤 자바스크립트 버전으로 변환할 건지 결정한다.
"es5" 꽤 예전 버전이다.

• 예전 버전으로 지정하면 구 버전의 브라우저도 지원할 수 있다.
  하지만 프로젝트 환경에 따라 이 target 옵션 외에 여러 요소가 컴파일 결과야 영향을 준다.
  따라서 프로젝트 설정에 따라 타입스크립트 코드가 자바스크립트로 컴파일 된 후, 또 다른 컴파일 단계를 거칠 수도 있다.
  • 예) Babel 같은 개발 도구 사용할 경우 산출된 자바스크립트 코드를 가지고 추가작업을 한다.

lib

이 옵션은 기본 타입스크립트 라이브러리이다. 여기 포함된 라이브러리는 어떤 타입이 타입스크립트에서 기본으로 지원되는지 결정한다.

• 이 라이브러리들은 사실 타입스크립트에 내장되어 있기 때문에 추가적으로 패키지를 설치할 필요는 없다.

• 프로젝트에서 사용하려면 여기에 이름이 반드시 추가되어 있어야 한다.

  • 예) dom 라이브러리가 여기에 추가되면 기본 DOM 타입들을 타입스크립트가 이해할 수 있게 된다.
    예시로, NewTodo.tsx파일을 보면, useRef()로 input을 잡아올 때, 타입으로 HTMLInputElement를 사용하고 있는데, 이는 이 dom 라이브러리가 추가되었기 때문에 기본적으로 지원 타입을 사용할 수 있는 것이다.

allowJs

이 옵션은 .js파일 포함 여부를 결정한다.

• 일반 자바스크립트 파일을 프로젝트에 둘 건지, 일반 자바스크립트 파일로부터 뭔가 가져올 때 오류를 표시하지 않을 건지 등

• 타입스크립트와 자바스크립트를 함께 사용하고 싶다면 이 설정을 true로 사용하면 된다.

strict

프로젝트에 엄격한 설정을 사용할지 정하는 옵션으로, true로 설정하면 프로젝트는 가장 엄격한 설정이 적용된다.

• 엄격 모드에서는 묵시적이 any 타입을 사용할 수 없다.

• 타입스크립트가 타입을 추론할 수 없는 경우에는 반드시 명시적으로 타입을 지정해야 한다.

strict를 true로 설정하면, 다른 검증 기능도 활성화되지만, 묵시적 any 타입을 잡아내는 기능이 제일 중요한 포인트!

jsx

이 옵션은 JSX 코드를 지원할 건지, 결과물로 어떤 코드를 생성할 건지 결정하는 옵션이다.

• 일반적으로 기본 설정(react-jsx)대로 두면 정상적으로 작동한다.