[Typescript & React & Eslint 환경설정 1편] tsconfig 설정을 해보자

tsconfig 란?

• Typescript로 짜여진 코드는 Javascript로 변환해 줄 트랜스파일러(컴파일러)가 필요합니다.
• 이러한 컴파일 과정에서 사용자가 필요한 여러 옵션을 설정할 수 있습니다.
• 그러한 파일이 tsconfig.json입니다.
• npx tsc --init 커맨드를 통해 기본형태를 생성할 수 있습니다.

tsconfig.json 컴파일 옵션 정리

옵션에 대한 자세한 정보는 여기에서 확인할 수 있습니다.

사용한 옵션

tsconfig.json

{
  "compilerOptions": {
/* 기본 옵션 */
  "target": "es5", /* 사용할 특정 ECMAScript 버전 설정: 'ES3' (기본), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 혹은 'ESNEXT'. */
  "module": "es2015", /* 모듈을 위한 코드 생성 설정: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
  "jsx": "react", /* JSX 코드 생성 설정: 'preserve', 'react-native', 혹은 'react'. */
  "declaration": true, /* '.d.ts' 파일 생성 여부. */
  "outDir": "./dist/", /* 해당 디렉토리로 결과 구조를 보냅니다. */
/* 엄격한 타입-확인 옵션 */
  "strict": true, /* 모든 엄격한 타입-체킹 옵션 활성화 여부 */
/* 모듈 해석 옵션 */
  "moduleResolution": "node", /* 모듈 해석 방법 설정: 'node' (Node.js) 혹은 'classic' (TypeScript pre-1.6). */
  "baseUrl": "./", /* non-absolute한 모듈 이름을 처리할 기준 디렉토리 */
  "typeRoots": ["./src/types", "./node_modules/@types"], /* 타입 정의를 포함할 폴더 목록, 설정 안 할 시 기본적으로 ./node_modules/@types로 설정 */
  "esModuleInterop": true, /* 모든 imports에 대한 namespace 생성을 통해 CommonJS와 ES Modules 간의 상호 운용성이 생기게할 지 여부, 'allowSyntheticDefaultImports'를 암시적으로 승인합니다. */
  "inlineSourceMap": true, /* 분리된 파일을 가지고 있는 대신, 단일 파일을 소스 맵과 가지고 있을 지 여부 */
/* 추가적 옵션 */
  "skipLibCheck": true, /* 정의 파일의 타입 확인을 건너 뛸 지 여부 */
  "forceConsistentCasingInFileNames": true, /* 같은 파일에 대한 일관되지 않은 참조를 허용하지 않을 지 여부 */
  "paths": { 
    "@/*": ["src/*"], 
    "@api/*": ["src/api/*"], 
    "@hooks/*": ["src/hooks/*"], 
    "@components/*": ["src/components/*"], 
    "@styles/*": ["src/styles/*"], 
    "@static/*": ["stc/static/*"], 
    "@utils/*": ["src/utils/*"], 
    "@types/*": ["src/types/*"], 
    "@layouts/*": ["src/layouts/*"], 
    "@pages/*": ["src/pages/*"],
    }
  },
"include": ["./src/**/*"],
"exclude": ["node_modules"],
"typeRoots": ["./src/types", "./node_modules/@types"]
}

"target": "es5"

• 사용할 특정 ECMAScript 버전 설정
• ES5에는 화살표 함수가 없기 때문에 일반 함수형식으로 변경됩니다.
• ex) ()=>null -> function(){return null}

"module": "es2015"

• ES6환경에 맞춘코드 생성 설정

"moduleResolution": "node"

• non-relative import를 위해 "node"사용
• 참조하는 방법은 여기를 참조해주세요.

이외의 설정은 주석을 통해 충분히 이해할 수 있으며 추가적인 설정은 여기를 통해 알 수 있습니다.