[이펙티브 타입스크립트] 8장 타입스크립트로 마이그레이션하기

이펙티브 타입스크립트 정주행 스터디 8주차

 

58 모던 자바스크립트로 작성하기

자바스크립트로 작성된 코드에서 발생한 버그 중 일정 부분 이상은 타입스크립트로 작성했다면 예방할 수 있었던 버그라고 한다. 그만큼 타입스크립트는 자바스크립트와 비교했을 때 한층 개선된 언어라고 할 수 있다.

타입스크립트는 특정 버전의 자바스크립트 코드로 컴파일해주는 기능이 있어, 최신 자바스크립트 문법을 사용하는 것으로 타입스크립트 입문을 해볼 수 있다.

특히, ES2015에 추가된 ES 모듈을 도입하면 점진적 마이그레이션이 더욱 원활해진다.

한편, 타입스크립트에서는 자바스크립트의 엄격모드(strict mode) 보다 더 엄격한 검사를 하기 때문에 굳이 use strict를 쓰지 않아도 된다. 트랜스파일된 자바스크립트에 use strict 구문이 추가되게 하고 싶다면 tsconfig.json에서 alwaysStrict 또는 strict를 켜두면 된다.

타입스크립트 팀은 자바스크립트 stage 3 이상의 기능들을 타입스크립트에 구현한다고 한다. 그래서 꼭 stage 4 이상이 아니더라도 타입스크립트에서는 쓸 수 있는 이점도 있다.

 

 

59 타입스크립트 도입 전에 시험해보기

타입스크립트를 도입하기 전에 점진적 마이그레이션을 실험해보는 방법이 있다. @ts-check와 JSDoc를 활용한다.

우선 @ts-check를 사용하면 자바스크립트 코드를 타입스크립트로 전환했을 때 어떤 에러가 발생할지 확인해볼 수 있다. 단, 실제 타입스크립트 수준으로 체크해주지는 않고 noImplicitAny 를 꺼둔 것보다도 덜 엄격하게 체크해준다. 타입이 아예 일치하지 않는 경우나, 매개변수 개수가 안맞는 것과 같은 경우는 확인할 수 있다.

사용하는 방법은 확인하려는 파일 맨 위에 주석으로 // @ts-check 라고 쓰면 된다.

 

 

60 allowJs로 TS와 JS 함께 사용하기

프로젝트의 규모가 클 경우, 점진적으로 JS와 TS를 병용하면서 점진적으로 마이그레이션을 시도해볼 수 있다.

tsconfig.json에서 allowJS 옵션을 켜두면 TS 파일과 JS 파일에서 각각을 크로스해서 import할 수 있게 된다.

자바스크립트의 target이나 module옵션을 설정해두었다면, 이를 타입스크립트쪽에도 동일하게 적용될 수 있도록 신경쓰자.

 

 

61 모듈 단위로 전환하기

JS에서 TS로 마이그레이션할 때는, module 단위로 접근하는 것이 이상적이다. 이 때 가장 밑단에 있는 module 부터 마이그레이션 작업을 시작해야, 마이그레이션 과정에서 발생하는 의존성 관련 에러를 최소화할 수 있다. 모듈의 의존성 그래프를 그려주는 도구, madge를 활용해볼 수 있다.

타입스크립트로 마이그레이션 하다보면 자바스크립트 코드에서 작성할 때 설계를 잘못했다는 점을 발견할 수도 있다. 리팩터링을 바로 하기보다는, 개선할 부분을 기록해두고 마이그레이션 작업을 온전히 마친 후에 진행하는 것이 더 효율적이다.

 

62 noImplicitAny 설정하기

타입스크립트로의 마이그레이션에서 가장 마지막 단계는 noImplicitAny 플래그를 키는 것이다. 

처음에는 로컬에서만 플래그를 켜두어 빌드 시에 문제가 발생하지 않도록 하는 것이 좋다. 로컬에서만 오류로 인식되어 점진적 마이그레이션에 문제가 없을 것이다. noImplicitAny를 키자마자 발생한 에러의 수가 100이라고 하고, 이 숫자를 50으로 줄였을 때 진척도가 대략 50% 정도라고 짐작해보는 용도로 활용할 수도 있다.

strict > noImplicitAny > strictNullChecks 순으로 강도 높은 타입 체크를 한다. 팀원 들과 타입스크립트에 점진적으로 적응해가면서 천천히 강도를 올리는 것이 좋다.