기존 JavaScript 프로젝트를 TypeScript로 변경하기

새로운 타입 스크립트를 이용한 리액트 프로젝트를 시작했다.

 

타입 스크립트를 복습할 겸 기존의 JavaScript로 만들었던 프로젝트를 TypeScript로 변경해보기로 했다.

 

TypeScript를 설치한다.

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

// 또는

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

그다음

yarn install

// 또는

npm install

tsconfig.json파일이 생성된다.

(혹은 생성되지 않았다면 tsconfig.json을 최상단에 추가해준다.)

아래 소스를 tsconfig.json에 추가해준다.

{
  "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"]
}

.js파일은 .ts로 변경하고 .jsx는 .tsx로 변경해준다!

 

+ styled-components를 사용한다면 아래와 같이 추가로 설치해준다.

yarn add --dev @types/styled-components

// 또는 

npm install --dev @types/styled-components

끝!

 

이젠 JavaScript에서 TypeScript로 변경하면서 발생한 에러들을 수정하면 진짜 끝이다!