TypeScript 9장 - 리액트를 타입스크립트로 적용하기

TypeScript

TS 설치

• 리액트와 같이 TS 설치

npx create-react-app my-app --template typeScript
yarn create-react-app my-app --template typeScript

• 기존 리액트에 TS만 추가

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

tsconfig.json 생성

• npx typescript --init이나 tsc --init을 해서 tsconfig.json파일을 생성한다.
• 타입스크립트의 기본 설정을 한다.

{
    "complierOption": { //컴파일 할 때 적용되는 옵션들
        "target": "es2015", // 어떤 버전의 js로 컴파일 할지
        "lib":[ // 어떤 환경에서 사용하는지
            "dom", // 브라우저
            "dom.literable",
            "esnext"
        ],
        "baseUrl" : "./src", // src를 절대 경로로 지정
        "allowJs": true, // ts안에서 js허용
        "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의 모든파일 확인함
        "src"
    ],
    "exclude": [
        "node_modules"
    ],
}

모듈 설치

• 기존 리액트 애플리케이션에서 모듈을 사용하기 위해 npm install --dev @types/styled-components와 같이 라이브러리를 설치하려고 하면 아래와 같은 오류가 발생한다.
• 이는 npm 패키지 의존성 간에 충돌이 발생 메시지로, 해당 패키지의 버전이 다른 패키지에 필요한 버전과 일치하지 않기 때문이다.
• react-scripts@5.0.1 패키지의 typescript 종속성에 대한 충돌로, typescript@5.0.2가 이미 설치되어 있으나 react-scripts@5.0.1은 typescript@>=2.7버전을 필요로 하며, tsutils@3.21.0,@typescript-eslint/eslint-plugin@5.54.0등의 다른 종속성도 필요로 한다.

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm WARN config dev Please use --include=dev instead.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: react-scripts@5.0.1
npm ERR! Found: typescript@5.0.2
npm ERR! node_modules/typescript
npm ERR!   peer typescript@">= 2.7" from fork-ts-checker-webpack-plugin@6.5.2
npm ERR!   node_modules/fork-ts-checker-webpack-plugin
npm ERR!     fork-ts-checker-webpack-plugin@"^6.5.0" from react-dev-utils@12.0.1
npm ERR!     node_modules/react-dev-utils
npm ERR!       react-dev-utils@"^12.0.1" from react-scripts@5.0.1
npm ERR!       node_modules/react-scripts
npm ERR!         react-scripts@"5.0.1" from the root project
npm ERR!   peer typescript@">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta" from tsutils@3.21.0
npm ERR!   node_modules/tsutils
npm ERR!     tsutils@"^3.21.0" from @typescript-eslint/eslint-plugin@5.54.0
npm ERR!     node_modules/@typescript-eslint/eslint-plugin
npm ERR!       @typescript-eslint/eslint-plugin@"^5.5.0" from eslint-config-react-app@7.0.1
npm ERR!       node_modules/eslint-config-react-app
npm ERR!         eslint-config-react-app@"^7.0.1" from react-scripts@5.0.1
npm ERR!         node_modules/react-scripts
npm ERR!       1 more (eslint-plugin-jest)
npm ERR!     tsutils@"^3.21.0" from @typescript-eslint/type-utils@5.54.0
npm ERR!     node_modules/@typescript-eslint/type-utils
npm ERR!       @typescript-eslint/type-utils@"5.54.0" from @typescript-eslint/eslint-plugin@5.54.0
npm ERR!       node_modules/@typescript-eslint/eslint-plugin
npm ERR!         @typescript-eslint/eslint-plugin@"^5.5.0" from eslint-config-react-app@7.0.1
npm ERR!         node_modules/eslint-config-react-app
npm ERR!         1 more (eslint-plugin-jest)
npm ERR!     1 more (@typescript-eslint/typescript-estree)
npm ERR!   1 more (the root project)
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\choigirang\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\choigirang\AppData\Local\npm-cache\_logs\2023-03-26T23_14_40_208Z-debug-0.log

해결

• react-scripts 5.0.1버전이 typescript 5.0.2버전과 충돌한다고 이해했다.
• react-scripts 5.0.1을 지우고 설치를 해보았는데 설치가 됐다. 하지만 react-scripts를 다시 설치하고 실행하니 다시 충돌이 발생했다.
• 이 방법으로는 안 되겠다고 생각하여 package.json파일에서 버전을 수정해주기로 하였다.
• 찾아보니 dependencies 항목은 npm install typescript@latest --save를 입력하고, devDependencies항목이 있으면 npm install typescript@latest --save-dev를 입력한다.
• 버전을 최신 버전으로 높여서 설치하여 해결한다.

추가

• 리액트 파일 자체를 tsx로 전환하기보다, 처음부터 다시 작성해보는 것을 추천받아 다시 작성해보려고 한다.