[React] 프로젝트 JavaScript 에서 TypeScript 마이그레이션 방법

시작하기 앞서

기존 자바스크립트로 만든 프로젝트에서 새로운 프로젝트를 생성하지 않고 그 프로젝트에서 타입스크립트로 마이그레이션 하는 방법에 대해 알아볼 것이다.

 

마이그레이션 방법

1. TypeScript 설치

타입스크립트과 타입스크립트에 필요한 기타 모듈들을 설치한다.

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

설치 완료

2. tsconfig.json 작성

기존 자바스크립트에 있던 jsconfig.json 을 제거하고 tsconfig.json 파일을 작성한다.

나는 아래 코드에 있는 내용을 작성했다.

{
  "compilerOptions": {
    "baseUrl": "src",
    "target": "es5",
    "lib": ["dom", "es2015"],
    "allowJs": true,
    "checkJs": false,
    "skipLibCheck": true,
    "strict": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react", // or "react-jsx" for React 17+
    "forceConsistentCasingInFileNames": true,
  },
  "include": ["src"]
}

3. ts 파일로 변경

이제 본격적으로 자바스크립트로 되어 있는 파일들을 타입스크립트로 바꿔준다. 확장자 명을 jsx -> tsx, js -> ts 로 하나씩 바꿔주면서 변환해준다.

이런 식으로 바꿈. 이벤트 타입이 좀 생소할 수도

공통 컴포넌트는 상속 사용함

 

발생한 문제 및 해결

js -> ts 로 바꾸면서 몇몇 문제들이 발생하였다.

이미지 경로 오류

이미지 찾을 수 없음

타입스크립트에서 .png 확장자를 받아들이지 못해 이런 오류가 발생하였다.

 

이를 해결하기 위해 최상단 폴더에 @types/global/index.d.ts 를 만들어 .png 확장자를 추가한다.

확장자 추가

declare module '*.png';

그리고 tsconfig.json 파일에 아래 내용을 추가해주면 오류가 발생하지 않게 된다.

{
  "compilerOptions": {
    ...
    "typeRoots": ["@types"]
  },
  ...
}

 

마치며...

자바스크립트로 만들어진 프로젝트를 타입스크립트로 바꿔보았다. 바꾸면서 타입스크립트에 대한 이해도가 더 높아진 거 같았다