[Todo] React 프로젝트에 Typescript 추가하기

이미 생성한 cra 프로젝트에 타입스크립트 추가하기:

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

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

타입스크립트 설치.
이렇게 하고 js파일을 tsx로 바꾸니 Route에서 에러가 났다.
전에 오무 프로젝트 리팩토링 시도했을때와 같은 에러.
CRA를 아예 처음부터 타입스크립트로 설정한 게 있어서 참고해봄.

tsconfig.json 파일

딱히 한 건 없고 CRA에서 생성해주는 파일을 고대로 복붙했다.

{
  "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"
  },
  "include": [
    "src"
  ]
}

package.json

"@types/react-dom": "^18.0.3",
이부분을 추가하고 npm i 해줌.
그랬더니 router에서 빨간줄은 사라졌다.

  "devDependencies": {
    "@types/react-dom": "^18.0.3",
    "typescript": "^4.9.4"
  }

@babel/preset-typescript 에서 .babelrc파일 생성

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    [
      "@babel/plugin-transform-runtime",
      {
        "regenerator": true
      }
    ]
  ]
}

다시시작

끄고 다시 npm start 해준다!

module not found 에러가 index.tsx에도 발생했다.

이번에는 tsconfig.json파일을 손봄.
module: esnext로 되어있었는데 commonjs로 수정했다!

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

styled components 타입스크립트 버전 설치

https://styled-components.com/docs/api#typescript

npm install --save-dev @types/styled-components