React + Typescript

우선, typescript를 global로 설치한다.

yarn global add typescript
npm install -g typescript

설치 후 아래의 명령어를 입력하면 tsconfig.json 파일이 자동 생성된다.

npx tsc --init

 

tsconfig란?

Typescript로 작성된 코드는 Javascript로 변환해줄 트랜스파일러(컴파일러)가  필요하며 이런 컴파일 과정에서 사용자가 필요한 여러 옵션을 설정한 파일이 tsconfig.json 파일이다.

 

 

tsconfig.json 컴파일 옵션 정리

{
  "compilerOptions": {
  /* 기본 옵션 */
  "target": "es5", /* 사용할 특정 ECMAScript 버전 설정 (예시, es5 지정 시 화살표 함수는 일반 function으로 컴파일 해준다. es6로 지정할 경우 화살표 함수 그대로 유지) */
  "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, /* commonjs 모듈 형태로 이뤄진 파일을 es2015 모듈 형태로 불러옴. '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"]
}

 

간략 설정

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonJs",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "./dist/"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

 

위의 경우 전역으로 설치한 타입스크립트 CLI를 통해 코드를 컴파일 했는데 만약 프로젝트 디렉토리 내에서 설치한 typescript 패키지를 사용해 컴파일 하려면 아래와 같이 진행한다. (보통 로컬에 설치한 타입스크립트 패키지를 사용해 컴파일함)

 

yarn add typescript
npm install --save typescript

package.json

{
  "name": "ts-practice",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "typescript": "^3.9.6"
  },
  "scripts": {
    "build": "tsc"
  }
}

 

build 스크립트를 만들어서 편리하게 컴파일 할 수 있다.

 

tsconfig.json 공식 문서

TSConfig Reference - Docs on every TSConfig option

컴파일러 옵션(Compiler Option)

TypeScript 한글 문서