이미 생성된 create-react-app에 typescript 적용하기

create-react-app 2.1.0 버전부터 기본으로 typescript를 지원한다. https://create-react-app.dev/docs/adding-typescript 를 참고해서 프로젝트를 새로 만들고 코드만 옮기는 것이 나을 수도 있다.

react-scripts 의존성 바꾸기

package.json의 dependencies에 있는 react-scripts를 react-scripts-ts 로 바꾼다. 이 글 작성 시점으로 최신 버전은 2.16.0이다.

 ..
 "dependencies": {
    "react-scripts-ts": "2.16.0"
  },

devDependencies에 typescript 의존성 추가

  ..
  "devDependencies": {
    "@types/jest": "^23.1.5",
    "@types/node": "^10.5.2",
    "@types/react": "^16.4.6",
    "@types/react-dom": "^16.0.6",
    "typescript": "^2.9.2"
  }

package-lock.json 및 node_modules 삭제 후 재설치

typescript config 파일 생성

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "build/dist",
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ]
}

tslint.json

{
  "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
  "linterOptions": {
    "exclude": [
      "config/**/*.js",
      "node_modules/**/*.ts"
    ]
  }
}

images.d.ts

declare module '*.svg'
declare module '*.png'
declare module '*.jpg'

react-app-rewired을 사용할 경우

react-app-rewired를 사용하고 있다면 관련 스크립트에 --scripts-version react-scripts-ts 파라메터를 추가한다.

  ..
    "scripts": {
    "start": "react-app-rewired start --scripts-version react-scripts-ts",
    "build": "react-app-rewired build --scripts-version react-scripts-ts",
    "test": "react-scripts test --env=jsdom --scripts-version react-scripts-ts",
    "eject": "react-scripts eject"
  },

index.js 를 index.tsx로 파일명 변경

index.js의 확장자를 tsx로 변경 후 React의 import하는 부분의 코드를 변경한다.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
…