React JavaScript에서 TypeScript로 바꾸기

1. 초기 설정

 - 타입스크립트 및 관련 의존성 설치

yarn add -D typescript @types/node @types/react-router-dom

 

2.tsconfig.json 생성 및 설정

 - jsconfig파일 위치에 tsconfig 생성 후 내용 추가

{
     "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": "bundler",
       "resolveJsonModule": true,
       "isolatedModules": true,
       "noEmit": true,
       "jsx": "react-jsx",
       "baseUrl": "./src",
       "paths": {
         "components/*": ["components/*"],
         "hooks/*": ["hooks/*"],
         "lib/*": ["lib/*"],
         "css/*": ["css/*"],
         "images/*": ["images/*"],
         "stores/*": ["stores/*"]
       }
     },
     "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.jsx"],
     "exclude": ["node_modules"]
   }

 

3. 간단한 컴포넌트 jsx-> tsx 변환 후 설정 이상 없는지 확인

4. 이후 index.js 및 app.js부터 전체 변경