Effective Typescript vol.8 (타입스크립트로 마이그레이션하기)

개요

이펙티브 타입스크립트라는 책을 읽고 장별(각각의 장안에 아이템별)로 학습한 내용 정리하기

 

이 책의 목표 

독자에게 타입스크립트나 자바스크립트를 가르치는 것이 아니라, 초급자나 중급자가 전문가로 발전할 수 있게 돕는 것

프로그래밍에서 어떤 방법을 가르치는게 아니라 어떤 방법을 사용할 때 왜 그래야 하는지를 알려준다.

 

이 장을 통해 알수 있는 것

기존의 자바스크립트로 이루어진 프로젝트를 꾸준하게 타입스크립트로 마이그레이션 할 수 있게 해주는 방법에 대해 알 수 있다. 참고로 이지만, 에어비앤비에서 진행된 프로젝트들의 사후 분석(post-mortem) 6개월치를 조사해 보니, 발견된 버그의 38%가 타입스크립트에서는 방지할 수 있었던 것들이었다고 한다.

 

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

• TS는 타입 체크 기능 외에, 특정 버전의 JS 코드로 컴파일할 수도 있다. 즉, TS 컴파일러를 JS 트랜스파일러(최신 버전의 자바스크립트 코드를 옛날 버전의 자바스크립트의 코드로 변환하는 친구)로도 사용할 수 있다. 이처럼 타입스크립트 개발 환경은 모던 JS도 실행할 수 있으므로 모던 JS의 최신 기능들을 사용하자. 코드의 품질, 타입추론도 더 향상될 수 있다.
  • 프로토타입 대신 클래스 사용하기
  • var 대신 let/const 사용하기
  • for(;;) 대신 for-of또는 배열 메서드 사용하기
  • 함수 표현식보다 화살표 함수 사용하기 (상위 스코프의 this를 유지하기 위해서)
  • 함수 매개변수 기본값 사용하기
  • 저수준 프로미스나 콜백 대신 async/await 사용하기 (코드의 간결, 직관성, const result = await fetchXXX를 하면 result 타입추론이 가능한점)
• 'use strict'는 타입스크립트 컴파일러 수준에서 사용되므로 코드에서 제거하자
• TC39의 깃헙 저장소와 타입스크립트의 릴리스 노트를 통해 최신 기능을 확인할 수 있습니다.

Item 59 타입스크립트 도입 전에 @ts-check와 JSDoc으로 시험해 보기

• 파일 상단에 // @ts-check를 추가하면 자바스크립트에서도 타입 체크를 수행할 수 있다.(밑의 스크린샷 참조)
• 전역 선언과 서드파티 라이브러리의 타입 선언을 추가하는 방법을 익히자.
• JSDoc 주석을 잘 활용하면 자바스크립트 상태에서도 타입 단언과 타입 추론을 할 수 있다.
  • 너무 공들이지는 말자. 어디까지나 .ts로 만드는게 최종목적이니

// @ts-check를 활용하는 예시

Item 60 allowJs로 타입스크립트와 자바스크립트 같이 사용하기

• 점진적 마이그레이션을 위해 자바스크립트와 타입스크립트를 동시에 사용할 수 있게 allowJs 컴파일러 옵션을 사용하자
• 대규모 마이그레이션 작업을 시작하기 전에, 테스트와 빌드 체인에 타입스크립트를 적용해야 한다.

Item 61 의존성 관계에 따라 모듈 단위로 전환하기

• 마이그레이션의 첫 단계는, 서드파티 모듈과 외부 API 호출에 대한 @types를 추가하는 것이다.
• 의존성 관계도의 아래에서부터 위로 올라가며 마이그레이션을 하면 된다. 의존성 관계도를 시각화 하여 진행 과정을 추적하는 것이 좋다. (의존성 관계도는 밑의 사진 참조, 위가 밑을 의존한다라고 보면 된다.)
• 이상한 설계를 발견하더라도 리팩터링을 하면 안된다. 일단 마이그레이션 작업에 집중을 하고 나중에 리팩터링을 위한 목록을 작성해 나눠서 처리하는게 이상적이다.
• 타입스크립트로 전화하며 발견하게 되는 일반적인 오류들을 놓치지 않아야한다. 

Item 62 마이그레이션의 완성을 위해 noImplicitAny설정하기

• noImplicitAny 설정을 활성화하여 마이그레이션의 마지막 단계를 진행해야 합니다. noImplicitAny 설정이 없다면 타입 선언과 관련된 실제 오류가 드러나지 않습니다.
• noImplicitAny를 전면 적용하기 전에 로컬에서부터 타입 오류를 점진적으로 수정해야 합니다. 엄격한 타입 체크를 적용하기 전에 팀원들이 타입스크립트에 익숙해질 수 있도록 시간을 주자. (꽤 합리적인 방법이라고 생각했다. noImplicitAny true를 하고 lint를 했을때 수백줄의 에러메세지를 보는게 너무 막막했었다..)