이미 create-react-app 했을 경우 typescript 적용하는 법

 

간단하게 리액트 앱을 만들려고 cra를 이용해 프로젝트를 생성해보자.

npx create-react-app .
npm start

 

아뿔싸 ! ts 템플릿을 이용해서 작업해야하는데 이미 create-react-app부터 갈겨버렸을 경우!

npx create-react-app my-app --template typescript

다시 삭제하고 위 명령어를 적어 다시 만들기엔 가오가 상한다면???

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

이렇게 명령어를 적어주고, index.js 와 App.js를 index.tsx App.tsx로 바꿔주고,

index.tsx 파일 내에 

document.getElementById('root')!

느낌표를 붙여주면! 완료!

그리고 tsconfig.json 파일을 생성해서

{
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "baseUrl": "./src",
    "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"
  },
  "include": [
    "src"
  ],
}

해당 설정도 추가해주자!

 

https://create-react-app.dev/docs/adding-typescript/

Adding TypeScript | Create React App