CRA TypeScript로 생기는 tsconfig.json 뜯어보기

// tsconfig.json

{
  "compilerOptions": {
      "strict": true,
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "baseUrl": "src",
    "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", "public/API"]
}

npx create-react-app typescript 로 생성되는 tsconfig.json의 설정값들을 확인해보자.

만약compilerOption이 생략된다면 컴파일러의 기본값이 사용된다.

target

컴파일 했을때 /build 에 생성되는 자바스크립트 버전

*lib *

컴파일 할 때 포함 될 라이브러리 목록, esnext는 가장 최신버전

baseUrl

모듈 이름을 처리할 기준 디렉토리

import abc from 'src/components/abc' 
import abc from 'components/abc' // baseUrl을 src로 설정시 이와 같이 접근할 수 있다.

allowJs

TypeScript 컴파일 작업 진행시 js파일도 컴파일 할것인지 여부

skipLibCheck

정의 파일의 타입 확인을 건너 뛸것인지

esModuleInterop

import React from 'react';
import ReactDOM from 'react-dom';

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import React = require('react');
import React = require('react-dom')

TypeScript에서 의 React는 export default를 갖고있지 않기에 첫번째와 같이 사용 할 수 없다
그렇기에 두번째나 세번째 방법을 사용해 import해와야 한다.
esModuleInterop : true 을 설정해준다면 1,2번째 줄처럼 import가 가능하다.

allowSyntheticDefaultImports

default export를 쓰지 않은 모듈도 default import가 가능하게 할건지 여부

strict

엄격모드 사용 여부, TypeScript를 사용한다면 무조건 true로 설정해주자. 그렇지 않으면 TypeScript를 사용하는 의미가 퇴색된다.

forceConsistentCasingInfileNames

같은 파일에 대한 일관되지 않은 참조를 허용하지 않을지 여부

noFallthroughCaseInSwitch

switch문에서 fallthrough 에 대한 에러 보고

module

모듈을 위한 코드 생성 설정

moduleResolution

모듈 해석 방법 설정

resolveJsonModule

TypeScript 모듈 내에서 json 모듈을 가져올수 있는 옵션

isolatedModules

각 파일을 분리된 모듈로 트랜스파일

noEmit

결과 파일을 내보낼지 여부

jsx

jsx 코드 생성 설정

include