React Typescript 프로젝트 생성 및 tsconfig.js 설정

React + Typescript 프로젝트 시작하기

현재 경로에 typescript React 앱 프로젝트 생성

yarn create react-app . --template typescript

 

 

tsconfig.js

타입스크립트를 자바스크립트로 변환 시키는 컴파일 설정을 한꺼번에 정의 해놓는 파일

브라우저에서는 타입스크립트를 읽지 못하기 때문에 자바스크립트로 컴파일 해야 한다. 

프로젝트를 컴파일 하는데 필요한 루트 파일, 컴파일러 옵션 등을 상세히 설정할 수 있다. 

 

{
    //컴파일 대상에서 제외할 파일들을 지정하는 속성
    "exclude": [],
    // 타입스크립트 컴파일러의 옵션들을 지정하는 속성
    "compilerOptions": {
        "target": "es5",
        "lib": ["dom", "dom.iterable", "esnext"], //컴파일 과정에서 사용될 라이브러리
        "allowJs": true, //자바스크립트 파일 컴파일 허용
        "skipLibCheck": true, //선언 파일 유형 검사 스킵
        "esModuleInterop": true, //모든 가져오기에 대한 네임스페이스 객체 생성을 통해 CommonJS와 ES 모듈 간의 상호 운용성을 제공
        "allowSyntheticDefaultImports": true, //기본 출력(default export)이 없는 모듈로부터 기본 호출을 허용 (이 코드는 단지 유형 검사만 수행)
        "strict": true, //엄격한 유형 검사 옵션 활성화
        "forceConsistentCasingInFileNames": true, //동일한 파일에 대한 일관되지 않은 케이스 참조를 허용하지 않음
        "noFallthroughCasesInSwitch": true, //switch 문 오류 유형에 대한 오류 보고
        "module": "esnext", // 생성될 모듈 코드 설정: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'.
        "moduleResolution": "node", //모듈 분석 방법 설정: 'node' (Node.js) 또는 'classic' (TypeScript pre-1.6)
        "resolveJsonModule": true, // ts 파일에서 json imoprt 허용
        "isolatedModules": true, //각 파일을 별도 모듈로 변환
        "noEmit": true, //출력 방출 유무 설정
        "jsx": "react-jsx" //생성될 JSX 코드 설정: 'preserve', 'react-native', or 'react'.
    },
    //컴파일할 파일들의 개별 목록을 지정하는 속성
    //exclude보다 우선순위가 높다.
    "files": [],
    //컴파일할 파일들을 지정하는 속성 (와일드 카드 패턴으로 묶어 표현)
    //우선순위가 exclude 보다 약하다.
    //와일드 카드 패턴
    // *: 해당 디렉토리에 있는 모든 파일
    // ?: 해당 디렉토리에 있는 파일들의 이름 중 한 글자라도 포함되면 해당
    // **: 해당 디렉토리의 하위 디렉토리의 모든 파일들을 포함
    "include": ["src"],

    //다른 tsconfig.json 파일을 상속받아서 설정을 재사용할 수 있게 해주는 속성
    "extends": ""
}

 

 

* create react-app으로 설치한 프로젝트에서는 누가 타입스크립트를 자바스크립트로 변환하는가?

이 경우에는 프로젝트 생성시 자동으로 설치된 react-scripts가 내부적으로 tsc 없이 Babel을 사용하여 Typescript 코드를 Javascript로 변환한다. 

 

package.json 파일 내 react-scripts가 포함된 것을 확인할 수 있다. 

react-scripts는 TypeScript 컴파일을 위해 tsc를 직접 사용하지 않고 Babel을 사용한다. 

Babel은 TypeScript의 타입 체크 없이 코드 변환(트랜스파일링)만 수행하여 .tsx 및 .ts 파일을 .js로 변환한다. 

타입 체크는 tsc가 아니라 eslint와 typescript가 함께 수행한다. 

 

** Babel

Babel은 최신 JavaScript(ES 이상) 및 TypeScript 코드를 구형 브라우저에서도 실행 가능하도록 변환(트랜스파일)하는 JavaScript 컴파일러로 tsc 처럼 타입 체크를 하지 않고, 단순히 TypeScript 코드에서 타입 관련 부분만 제거한 후 JavaScript로 변환한다.

 

** tsc

TypeScript Compiler로 TypeScript 코드를 JavaScript로 변환하고 타입을 검사하는 도구

타입스크립트 공식 컴파일러로, Babel과 달리 타입 검사를 수행한다.

 

 

📘 타입스크립트 컴파일 설정 - tsconfig 옵션 총정리