installation

타입스크립트와 리액트 프로젝트를 시작한다면 아래와 같이 설치하자

1. create project

npx create-react-app <프로젝트명> --template typescript

2. ts install

npm i typescript @types/node @types/react @types/react-dom @types/jest

tsconfig.json

타입스크립트 설정 파일이다. 컴파일할 파일과 컴파일완료된 js파일의 경로, 파일명 등을 설정할 수 있다.

프로젝트 루트에 tsconfig.json를 위치한다. 정확히는 tsconfig.json이 위치한 곳을 프로젝트 루트로 인식한다.

TSConfig Reference를 방문하여 자세한 설정을 확인하자.

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "ES2015",
    "removeComments": true, // 주석 지우기
    "sourceMap": true,
    "outDir": "dist" // 컴파일 한 뒤 js 파일 생성할 위치
  },
  "files" : ["core.ts","...",...]
  "include": ["src/**/*"], // src 안의 모든 ts파일 컴파일
  "exclude": ["node_modules", "**/*.spec.ts"] // node_modules 설치안함 설정
}

• compilerOptions : 생략 가능한 속성으로, 지정하지 않으면 기본값이 적용된다.
• files : 상대경로, 절대경로 목록을 가져온다.
• include : 컴파일할 파일지정, **/* 으로 모든 src하위 경로의 파일을 모두 감시한다.
• exclude : 컴파일 제외 대상 지정

추가 자료
Typescript+React Cheatsheet
Typescript Example on React
Typescript handbook
Typescript handbook 한국어