[리팩토링] 자바스크립트로 작성한 프로젝트 타입스크립트로 마이그레이션하기

드디어, 오심테의 타입스크립트 마이그레이션을 진행했다. 미루고 미뤄뒀는데 손이 근질근질해서 생각난김에 바로 해버렸다.

처음엔 자바스크립트로 개발하고, 전체적인 개발을 마친 후 타입스크립트로 전환했다. 한 입 크기로 잘라먹는 타입스크립트 강의를 수강하고 배운 내용을 적용해보고자 하였다. 사실 아직 타입스크립트에는 더 익숙해져야 한다는 걸 느꼈다. 그래도 강의를 수강한 덕분에 이전에 '맛피' 프로젝트를 할 때보다는 아주 조금? 더 다양한 타입스크립트 문법을 적용해본 것 같다. 앞으로 타입스크립트와 더 친해질 수 있도록 간간히 강의 내용을 복습해야겠다.

 

자바스크립트 프로젝트를 타입스크립트로 마이그레이션 하는 과정을 간단히 기록해보고자 한다.

 

먼저 타입스크립트 관련 패키지를 설치한다.

npm i typescript @types/node @types/react @types/react-dom @babel/preset-typescript

그 후 tsconfig.json 파일을 만들어준 뒤 아래와 같이 설정한다. 설정은 그 때 그 때 바꿔주면 된다.

기존에 작성한 자바스크립트 파일에는 대부분 타입이 설정되어 있지 않아 noImplicitAny 컴파일 에러가 다수 발생하므로 타입스크립트 설정파일에서 해당 옵션을 껐다. 나중에 변환이 마무리되면 true로 변경해줘도 된다.

"noImplicitAny": false

일단 strickNullChecks도 꺼뒀다.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "noImplicitAny": false,
    "strictNullChecks": false,
    "jsx": "preserve" ,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true
  },
  "include": [
    "./**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

마지막으로 js로 되어있던 파일들을 ts, tsx로 변환하고 에러를 고쳐나간다.

이 프로젝트에 사용한 외부 라이브러리는 sweetAlert2, firebase 정도인데 모두 유명한 라이브러리라 모두 TS를 지원하여, 따로 @types가 붙은 라이브러리를 다시 설치해 코드를 변경해줄 필요가 없었다! (사실 이게 제일 무서웠음) 쏘 럭키..

 

코드 양이 많지 않아서 하루 안에 마이그레이션을 끝낼 수 있었다. 다음부터는 처음부터 타입스크립트로 프로젝트를 시작해야겠다. 추후에 시간이 허락된다면 로그인 및 테스트 찜하기 기능을 만들어보고 싶다.

 

참고한 블로그)

https://velog.io/@hon9g/%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A1%9C-%EB%9A%9D%EB%94%B1-%EB%A7%88%EC%9D%B4%EA%B7%B8%EB%A0%88%EC%9D%B4%EC%85%98-%ED%95%98%EA%B8%B0

타입스크립트로 뚝~딱 마이그레이션 하기!