react에 typescript 적용하기

회사에서 사용중인 오래된 버젼인 리액트 ^16.13.1에서 typescript만 적용해 보려고 한다.

 

React@^16.13.1 버전과 잘 맞는 버전

React@^16.13.1과 잘 맞는 typescript 버전에 대해서 ChatGPT 질의 한 결과를 토대로 진행하려고 한다.

 

설치 모듈 및 버전

Modules	react-hook-form 버전
typescript@^4.1.2	yarn add --dev typescript@^4.1.2
@types/node@^10.17.27	yarn add --dev @types/node@^10.17.27
@types/react@^16.9.0	yarn add --dev @types/react@^16.9.0
@types/react-dom@^16.9.0	yarn add --dev @types/react-dom@^16.9.0
@typescript-eslint/eslint-plugin@^4.5.0	yarn add --dev @typescript-eslint/eslint-plugin@^4.5.0
@typescript-eslint/parser@^4.5.0	yarn add --dev @typescript-eslint/parser@^4.5.0

 

 

@types/react 버전 최신걸로 변경

chatGPT에 물어보고 버전에 맞는걸 깔았는데 여러 작업할때마다 오류가 난다. (필자는 react-hook-form으로 아토믹하게 컴포넌트 만들때 에러가 났다.)

주요 에러는 `DatePicker throws error "cannot be used as a JSX component"` (https://github.com/ant-design/ant-design/issues/34952)

삽질하지 말고 첨부터 아래처럼 최신버전 깔자!

$ yarn add --dev @types/react @types/react-dom

 

  "devDependencies": {
    "@types/react": "^18.2.46",
    "@types/react-dom": "^18.2.18",
    "@typescript-eslint/eslint-plugin": "^4.5.0",
    "@typescript-eslint/parser": "^4.5.0"
  }

 

tsconfig.json

앞으로 typescript 사용할 거니깐 jsconfig.json 파일 삭제해 준다.

{
  "compilerOptions": {
    "target": "es6",
    "outDir": "dist",
    "lib": ["dom", "dom.iterable", "esnext"],
    "declaration": true,
    "declarationDir": "dist",
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "baseUrl": "./src"
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

 

짝짝! 이렇게 설정함으로써 자바스크립트와 타입스크립트가 공존하게 되었다.

아름답진 않지만 앞으로 작업하는건 타입스크립트로 작성하고 시간될때마다 개선해나가자!