[TypeScript]React에 TypeScript 적용하기(tsconfig.json)

 ◼ tsconfig.json 

tsconfig.json 파일은 TypeScript 프로젝트의 루트 디렉토리에 위치하여, 프로젝트를 컴파일하는 데 필요한 루트 파일과 컴파일러 옵션을 지정하는 설정 파일입니다. 

이 파일을 통해 컴파일할 때 필요한 옵션을 미리 정의하여 명령어에 일일이 지정할 필요 없이 사용할 수 있습니다. 

JavaScript 프로젝트의 경우에는 jsconfig.json 파일을 대신 사용할 수 있습니다.

 

 

 

 

tsconfig.json 몇가지 옵션 설명

{
  "compilerOptions": {
    "target": "es2016",             // 어떤 ECMAScript 버전으로 변환할지  (ES7(ES2016),ES6(ES2015)나 ES3 )             
    "module": "commonjs",           // 어떤 방식으로 모듈을 만들지 |  ESM을 쓰시려면 es6, es2020 같이 es로 시작하는 값을 쓰면 되고, CJS를 쓰시려면 commonjs라고 쓰시면 됩니다.                 
    "esModuleInterop": true,        // ES 모듈을 안전하게 사용                    
    "forceConsistentCasingInFileNames": true,      // 파일의 대소문자 구분하기     
    "strict": true,                 // 엄격한 규칙들 켜기               
    "skipLibCheck": true            // 설치한 패키지의 타입 검사하지 않기          
    "outDir": "dist",               // 빌드파일 장소
    "rootDir": "src",               // 최상의 폴더
    "resolveJsonModule": true,
  }
}

 

 

 

 

 

 

 

 ◼ tsconfig.json 의 jsx 

타입스크립트에서 JSX문법으로 작성된 문법을 변환할때 어떤형태로 변환할지 정하는 옵션입니다.

JSX는 JS언어가 아니기에 브라우저에서 바로 실행할수 없습니다. 그렇기 때문에 JS로 트랜스파일링해야합니다.

TS에서 react를 사용할때, 브라우저에서 실행할수 있는 JS로 변환 할건지, 아니면 JSX 문법으로 변환하지 않을건지

선택할수 있습니다.

트랜스파일링
소스코드를 한 언어에서 다른언어로 변환하는 과정을 말합니다.
ex)
TS => JS로 변환
JSX => JS로 변환

 

 

 

JSX의 모드

react, react-jsx 같은 모드로 설정하면 TS 컴파일러는 react의 규칙에 따라 js코드로 변환하여 실행해주고,

preserve 트랜스파일을 하지 않고  JSX문법을 그대로 사용합니다.

TS가 preserve 모드로 사용할때 번들링때 JS 파일로 트랜스파일링이 일어날수 있습니다.

 

 

 

 

 

[참고]
https://www.typescriptlang.org/ko/docs/handbook/tsconfig-json.html

https://inpa.tistory.com/entry/TS-%F0%9F%93%98-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-tsconfigjson-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-%EC%B4%9D%EC%A0%95%EB%A6%AC