기존 React 프로젝트에 typescript 도입하기

새로 만드는 react 프로젝트를 타입스크립트 기반으로 만들거라면 

 

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

 

를 치면 되고 기존의 javascript 기반 react 프로젝트에 타입스크립트를 적용할 거라면

 

yarn add typescript @types/node @types/react @types/react-dom @types/jest

 

이렇게 라이브러리들을 깔아주세요 

 

@types가 앞에 붙으면 타입스크립트가 지원되는 라이브러리 입니다. 

 

아마 새로 프로젝트를 생성하는 경우는 큰 문제가 없는데 저는 기존의 프로젝트에 적용했더니

바로 사용이 안되더라구요 

 

1. 일단 jsconfig.js 파일이 있다면 지워주세요 

 

2. yarn install

(혹은 npm install을 해주세요. npm이나 yarn 중 둘 중 한가지로 쓰던 것만 써줘야합니다.

yarn.lock과 package-lock.json 파일이 같이 있으면 안되요 그럴 경우 다시 해당 파일을 지워주고 다시 이 명령문을 실행시키면 됩니다. )

 

3. tsconfig.json 파일이 생성될 것입니다. 여기서 yarn start(혹은 npm start)를 해서 실행이 된다면 그대로 하시면 되고 

 

만약 jsx 관련 에러가 난다면 

 

기존의 .js로 선언했던 리액트 파일을 .tsx로 변경해주고 에러가 난다면 

 

tsconfig.json 파일 : 'jsx':'react-jsx' 를 'jsx':'react'로 바꿔주세요. 

{
  "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",
    "incremental": true,
    "baseUrl": "src",

  },
  "include": [
    "src"
  ]
}

 

저는 파일을 절대경로로 import 해서 사용하기 때문에 baseUrl과 include설정을 해줬는데

 

안쓴다면 그것은 놔두시면 됩니다. 

 

혹시 이러고도 --jsx 어쩌구 에러가 난다면 vscode (혹은 다른 에디터)를 껐다 켜주세요. 

 

저도 이부분 때문에 애먹었는데 가끔 바로 반영이 안된다고 하더라구요 저는 이렇게 고쳤습니다. 

 

 

 

 

** 기타 이러고도 안된다면 해볼점 ( stackoverflow에서 본 방법들입니다.)

 

1. tsconfig.json에 'incremental':true를 추가하기 (위의 파일 참고)

2. jsconfig.json 파일과 tsconfig.json파일이 동시에 있나 다시 체크하기 있다면 둘다 지우고 다시 yarn install해서 에디터 껐다 키고 다시 yarn start 하기 

 

등이 있습니다. 

 

 

이제 리액트가 정상적으로 동작이 된다고 가정했을 때 

 

styled-components, redux, react-router-dom과 같은 라이브러리를 사용하셨다면 에러문에 

 

npm install --dev @types/styled-components

 

이런식으로 안내가 나올거예요 차례대로 이런방식으로 설치해주시면 됩니다. 기존의 라이브러리를 삭제할 필요는

 

없습니다. (아마 둘다 설치해야되는 걸로 아는데 이건 더 찾아볼게요)