[TypeScript] tsconfig.json 설정 옵션 알아보기

 1. tsconfig.json

tsconfig.json에서는 이렇게 컴파일러 옵션을 설정할 수 있는데, 컴파일 시 얼마나 엄격하게 타입 오류를 검사할지, 자바스크립트 버전을 어떻게 할지 프로젝트에 따라, 개발자의 입맛에 맞춰 설정할 수 있다. tsc --init으로 초기화 하면 tsconfig.json 파일이 기본옵션으로 생성된다.(직접 생성해도 된다)

1) "include"  : 컴파일할 파일이 많을 경우, 일일히 컴파일 하지 않고 특정 위치 기준으로 아래의 모든 파일을 컴파일하도록 설정할 수 있다.

{
  "include": ["src"]
}

2) "compilerOptions" : "target", "module", "outDir", "strict", "mpduleDetection" 등

  {
  "compilerOptions": {
    "target": "ES5", //컴파일 될 자바스크립트 버전 설정 가능
    "module": "CommonJS", // 자바스크립트 모듈 시스템 버전을 설정 가능
    "outDir" : "dist", // 컴파일 될 js파일들을 어디에 위치할지 설정 가능
    "strict": true, // "엄격한 타입 검사"하도록 지정(매개변수에 타입 지정안하면 오류)
    "strictNullChecks": false, // null타입을 엄격하게 검사할지 여부(다른 타입에 null 넣을 수 있음)
    				// "strict"의 하위 옵션이기 때문에 해당 옵션이 꺼져있으면 같이 꺼진다.
     "moduleDetection": "force", // 타입스크립트의 전역 모듈들을 개별 모듈로 자동 변환
     "skipLibCheck": true, // @types 버전이 20버전 이상으로 업데이트 되면서 이후 모든 tsconfig.json에옵션 추가
     			위 옵션은 타입 정의 파일(.d.ts 확장자를 갖는 파일)의 타입 검사를 생략하는 옵션.
				보통 타입 정의 파일은 라이브러리에서 사용하는데 가끔 라이브러리의 타입 정의 파일에서 타입 오류가 발생하는 일이 발생할 수 있다.
				따라서 해당 옵션을 true로 설정하셔서 불 필요한 타입 정의 파일의 타입 검사를 생략하도록 설정.
  	 
  },
  "include": ["src"]
}

❗ "undici-types" 에러 날 경우 : "skipLibCheck": true 옵션은 타입 정의 파일(.d.ts 확장자를 갖는 파일)의 타입 검사를 생략하는 옵션. 보통 타입 정의 파일은 라이브러리에서 사용하는데 가끔 라이브러리의 타입 정의 파일에서 타입 오류가 발생하는 일이 발생할 수 있다.따라서 해당 옵션을 true로 설정하셔서 불 필요한 타입 정의 파일의 타입 검사를 생략하도록 설정.

❗ "moduleDetection" : 자바스크립트에서는 하나의 파일을 독립적 모듈로 취급하지만, 타입스크립트에서는 모든 파일을 전역 모듈로 취급한다.

즉 각각 파일에 변수명이 같아도 자바스크립트는 독립된 모듈이라 전혀 상관없지만, 타입스크립트는 동일한 전역 스코프로 취급되어 에러가 발생한다. 이에 2가지 해결방법이 있는데,

1) 한 파일에 export 또는 import 등 모듈시스템을 1번 이상 강제로 사용 하여 독립된 모듈로 취급한다.

2) tsconfig.json에 "moduleDitection" : "force" 옵션을 추가한다. (에러 안사라지면 ctr+shift+p 로 restart 검색하여 ts 다시 검사) -> 이렇게 하면 컴파된 js파일에 자동으로 export 키워드가 추가시켜 개별 모듈로 변환 것을 확인할 수 있다.

 

 

 

<참고>

위 내용은 인프런 이정환 '한입 크기로 잘라먹는 타입스크립트' 강의를 공부하며 작성하였습니다.