[TypeScript] tsconfig.json 알아보기

타입스크립트 형태로 프로젝트 생성을 하게 되면 root path 에 tsconfig.json 이라는 파일이 생성되어있을것이다.

이 파일의 목적은 타입스크립트 ts 파일들을 .js 파일로 변환할 때 어떻게 변환할 것인지 세부설정하기위한 설정파일이다. 기본적으로 생성되어있는 설정값으로 진행해도 되지만 어떠한 설정값이 있는지 알아볼것이다.

 

필자는 CRA(create-react-app) 을 통해서 타입스크립트용으로 프로젝트를 생성할때  tsconfig.json 기준으로을 시작을 한다.

$ npx create-react-app ts_demo --template typescript

을 입력시 리액트 프로젝트가 생성된다.

CRA 생성

위처럼 ts_demo 디렉토리를 가보면 tsconfig.json 가 생성되있을 것이다.

 

// 기본적으로 생성되는 tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

compilerOptions: ts 파일을 js로 컴파일하기 위한 설정값을위한 object

• target: 어떤 자바스크립트 버전으로 변경할지 설정하는 부분 (es5, es6, esnext 등 있음) 
• lib: 컴파일시 포함되어야하는 라이브러리 목록 (예를들어 async -> Promise 변환하기 위해 필요)
• allowJs: 말그대로 js 허용할지 묻는 속성. 컴파일할때 자바스크립트 파일 포함되도 되는지 설정값
• skipLibCheck: 정의파일(*.d.ts 확장자를 가진 파일)의 타입 확인을 skip 여부
• esModuleInterop: js 문법중 import 와 require 호환성을 위한 설정값. true 라면 CommonJS 모듈을 ES6 모듈 기준으로 가져올수 있게 된다.
• allowSyntheticDefaultImports: 타입확인시 default export이 아닌 모듈에서도 default import 가 가능 여부 값.
• strict: 모든 엄격한 타입 검사 옵션을 활성화 여부 값.
• forceConsistentCasingInFileNames: 파일명에 대소문자 구분하지 않아도 되는지 여부 값. true 이면 대소문자 구분없이 import 시 대소문자 구분없이 사용가능. ex) import Api from 'Api' == import Api from 'api'
• noFallthroughCasesInSwitch: 스위치문 사용지 코드 이상 감지 활성화 여부. case 에 break 없으면 이상감지로 오류발생.
• module: 모듈설정. 무슨 import 문법을 사용할것인지 설정값 (commonjs, amd, es2015, esnext 등 있음)
• moduleResolution: module을 import 하거나 export 시 처리방식 설정값.
• resolveJsonModule: json 파일 모듈을 가져오게 할지 여부 설정값.
• isolatedModules: 타입스크립트 경우 import/export 없는경우 파일을 레거시 취급하여 이러한 파일들을 전역 네임스페이스 병합하는데, true 일경우 컴파일시 export {} 를 붙여서 모듈로 생성하도록 해준다.

// temp.ts
const temp = 1
console.log(temp)

-----------------------------------------------

// 컴파일시
const temp = 1
console.log(temp)
export {} // <- 붙여서 하나의 모듈로 만들어준다.

• noEmit: true시에는 ts 파일을 오류확인만 하고 파일은 생성하지 않음(js 파일 생성안함.)
• jsx: 리액트파일 사용 여부 설정값