[이펙티브 타입스크립트] 8장 타입스크립트로 마이그레이션하기 아이템58-60
8장 타입스크립트로 마이그레이션하기
대규모 프로젝트를 타입스크립트로 마이그레이션할 때는 점진적으로 전환해야 한다.
또, 진행 상황을 모니터링하고 추적해서 중복된 작업을 방지할 수 있어야 한다.
아이템 58 모던 자바스크립트로 작성하기
타입스크립트는 코드를 특정 버전의 자바스크립트로 컴파일할 수 있다.
옛날 버전의 자바스크립트 코드를 최신 버전의 자바스크립트로 바꾸면 최신 버전의 자바스크립트 기능을 코드에 추가해도 문제가 없기 때문에, 타입스크립트로 전환하는 작업의 일부로 볼 수 있다.
타입스크립트를 도입할 때 가장 중요한 기능은 ECMAScript 모듈과 ES2015이다.
ES5에 도입된 strict mode보다 타입스크립트가 더 엄격한 체크를 하기 때문에 'use strict'는 무의미하다.
코드에 'use strict'를 쓰는 대신 alwaysStrict 설정을 사용하면 모든 파일에 'use strict'을 적용해준다.
https://www.typescriptlang.org/tsconfig/#alwaysStrict
TSConfig Reference - Docs on every TSConfig option
From allowJs to useDefineForClassFields the TSConfig reference includes information about all of the active compiler flags setting up a TypeScript project.
www.typescriptlang.org
타입스크립트 개발팀은 자바스크립트 표준화 4단계 중 3단계 이상의 기능들을 타입스크립트 내에 구현하고 있다.
3단계는 최종 피드백 단계로 구현 상의 심각한 오류가 발견되지 않는 이상 반려되지 않는다.
https://ahnheejong.gitbook.io/ts-for-jsdev/appendix-ii-js-ecosystem/tc39-process
TC39 프로세스 | ts-for-jsdev
이하 1단계: 제안 단계와 구분하기 위해 앞으로 0단계에서 4단계에 이르기까지, 아직 표준에 편입되지도, 명시적으로 거절되지도 않은 제안을 통틀어 프러포절이라 칭한다.
ahnheejong.gitbook.io
아이템 59 타입스크립트 도입 전에 @ts-check와 JSDoc으로 시험해보기
본격적으로 타입스크립트를 도입하기 전에 @ts-check 지시자를 사용해 타입스크립트로 전환 시 어떤 문제가 발생하는지 미리 시험해볼 수 있다.
@ts-check는 매우 느슨한 수준으로 타입을 체크하지만 다음의 몇 가지 오류들을 찾아낼 수 있다.
선언되지 않은 전역 변수
Html 파일 내의 script 태그에 선언된 변수는 기본적으로 전역 변수로 간주된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var globalVar = "I am a global variable";
function globalFunction() {
console.log("I am a global function");
}
</script>
<script>
console.log(globalVar); // "I am a global variable"
globalFunction(); // "I am a global function"
</script>
</body>
</html>
이런게 어딘가에 숨어있는 변수를 제대로 인식하지 못한다면 변수를 제대로 인식 할 수 있게 별도로 타입 선언 파일을 만들어야 한다.
// @ts-check
// ~~~~ 'user' 이름을 찾을 수 없습니다.
console.log(user.firstName);
// types.d.ts
interface UserData {
firstName: string;
lastName: string;
}
declare let user: UserData;
알 수 없는 라이브러리
서드파티 라이브러리를 사용하는 경우, 서드파티 라이브러리의 타입 정보가 필요하다.
@ts-check를 통해 타입 체크를 확인하고 타입 선언이 필요하면 @types 파일을 설치할 수 있다.
DOM 문제
@ts-check를 사용하면 자바스크립트 파일이므로 단언문을 사용할 수 없고, JSDoc을 사용하여 타입 단언을 대체할 수 있다.
// @ts-check
const ageEl = /** @type {HTMLInputElement} */(document.getElementById('age'));
ageEl.value = '12';
부정확한 JSDoc
프로젝트에서 이미 JSDoc을 사용하고 있는 경우 @ts-check 지시자를 설정하면 오류가 발생할 수 있다.
타입스크립트 언어 서비스는 타입을 추론해서 JSDoc을 자동으로 생성해주는 기능도 있는데, 잘 동작하지 않을 수도 있다.
자바스크립트 환경에서도 @ts-check와 JSDoc을 사용하면 타입스크립트와 비슷한 경험으로 작업할 수 있다.
점진적 마이그레이션에는 유용하지만 너무 장기간 사용하면 주석이 코드 분량을 늘려서 로직을 해석하는데 방해가 될 수 있다.
이미 JSDoc으로 타입 정보가 많이 담겨있는 프로젝트라면 @ts-check 지시자만 간단히 추가하여 기존 코드에 타입 체커를 실험해볼 수 있다.
아이템 60 allowJs로 타입스크립트와 자바스크립트 같이 사용하기
allowJs 옵션을 사용하면 타입스크립트 파일과 자바스크립트 파일을 서로 임포트할 수 있게 해준다.
기존 빌드 과정에서 타입스크립트 컴파일러를 추가하기 위해서는 allowJs 옵션이 필요하다.
기존 자바스크립트 코드에 특별한 규칙이 있다면 타입스크립트가 생성한 코드가 기존 자바스크립트 코드의 규칙을 따르도록 출력 옵션을 조정해야 할수도 있다.
타입스크립트로 마이그레이션할 때는 빌드와 테스트도 동작하게 해야한다.