CRA + TypeScript 초기 세팅 방법 정리

CRA(Create-React-App)는 React를 사용할 때 필요한 Babel 이나 Webpack 같은 패키지들을 한번에 설치해주는 도구라서 굉장히 편리하다. CRA + TypeScript 조합으로 사용할 때도 매우 간단한 방법으로 초기 세팅을 할 수 있다.

 

CRA + TypeScript 명령어

$ npx create-react-app ts-react-practice --template typescript

ts-react-practice 부분은 내 프로젝트 명을 써주면 되므로 그곳만 교체해서 사용하면 된다.

 

별도의 ES LInt나 Prettier 설정을 해줄 수도 있지만 나는 VS code의 Extension을 사용하고 있기 때문에 설정해주지 않았다.

 

기존 프로젝트에 TypeScript 적용하기

이미 만들어진 프로젝트에 TypeScript를 적용하고 싶다면 TypeScript 설정을 위한 패키지를 설치해주어야 한다.

먼저, typescript가 전역으로 설치되어 있지 않다면 먼저 전역으로 설치해준다.

$ npm i -g typescript

그런 다음 내 프로젝트 경로 안에서 아래와 같이 설치해준다.

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

그리고 tsc 명령어를 통해 tsconfig.json 파일을 생성한다.

$ tsc --init

생성된 tsconfig.json 파일에 아래와 같이 설정한다.

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "src"
  },
  "include": [
    "src"
  ]
}

이렇게 되면 기본 설정은 끝났고, 이 후 부터는 기존 jsx 문법으로 쓰인 파일들을 tsx로 변경하고 타입 지정을 해주면 된다.