1장에서 살펴본 바와 같이 타입스크립트는 자바스크립트보다 개선된 언어이다. 새로운 프로젝트를 시작한다면 처음부터 타입스크립트로 작성하면 되지만, 이미 자바스크립트로 작성되어 있는 프로젝트는 규모가 매우 클 수 있기 때문에 점진적으로 타입스크립트로 전환하는 과정이 필요하다.
규모가 큰 프로젝트를 타입스크립트로 마이그레이션 하는 과정은 많은 시간을 소모할 수 있으나, 결과적으로 자바스크립트에 타입을 추가해 줌으로써 코드의 퀄리티와 가독성을 높일 수 있고 프로젝트 과정에서 발생할 수 있는 런타임 에러들*(예를 들어 동일 연산자의 인수 강제 변환, 존재하지 않는 프로퍼티의 접근 허용 등으로 인한 에러)*을 방지할 수 있다. 프로젝트의 유지 및 보수에 많은 이점이 된다.
현재 구글, 마이크로소프트, 메타(구 페이스북)와 같은 회사들은 타입스크립트를 사용하고 있다. 또한, 자바스크립트 개발자를 대상으로 한 ‘2021년 JS 현황’ 설문조사에서 타입스크립트를 사용하고 있는 개발자의 비율이 2016년 21%에서 5년 만에 69%로 상승한 것으로 나타났다.
이를 통해 향후 타입스크립트의 점유율이 지속적으로 상승할 것을 예측할 수 있다. 결과적으로 자바스크립트를 타입스크립트로 변환하는 것은 프로젝트를 장기적으로 관리하는 데 있어 좋은 선택지가 될 것이다.
자바스크립트에서 타입스크립트로의 변환은 다양한 에러를 수반할 수 있다. 이 장에서는 타입스크립트로의 마이그레이션 방법과, 마이그레이션 과정에서 발생할 수 있는 에러들을 해결할 수 있는 방법을 살펴 볼 것이다.
마이그레이션 가이드 파트에서는 번들러 없이 자바스크립트로 구현한 프로젝트를 마이그레이션 한다고 가정한다.
먼저 초기 프로젝트 폴더의 구조는 아래와 같다.
루트 디렉토리에 기본 문서 파일인 index.html이 있고, src 폴더에 script.js, style.css 파일이 존재한다. 여기서 우리가 타입스크립트로 마이그레이션 할 파일이 바로 script.js다.
<aside> ❓ 번들러란?
웹 애플리케이션을 구성하는 리소스나 모듈을 하나로 합쳐주는 도구. ****대표적으로 webpack이 있다.
</aside>
컴파일한 파일이 들어갈 폴더 생성
먼저 컴파일한 자바스크립트 파일이 들어갈 ‘dist’ 폴더를 하나 생성해보자. 이 폴더에는 타입스크립트에서 자바스크립트로 컴파일한 파일이 들어간다. 마이그레이션을 진행하는 동안 컴파일된 자바스크립트와 파일이 중복되는 일이 없도록 폴더를 분리하는 것이다.