12장 타입스크립트 프로젝트 관리
12.1 앰비언트 타입 활용하기
12.1.1 앰비언트 타입 선언
- 타입스크립트의 타입 선언은 .ts 또는 .tsx 확장자를 가진 파일에서 할 수 있지만 .d.ts 확장자를 가진 파일에서도 선언할 수 있다
- .d.ts 확장자를 가진 파일에서는 타입 선언만 할 수 있으며 값을 표현할 수는 없다
- 값을 포함하는 일반적인 선언과 구별하기 위해 .d.ts 확장자를 가진 파일에서 하는 타입 선언을 앰비언트 타입 선언이라고 부른다
- 앰비언트 타입 선언으로 값을 정의할 수는 없지만 declare라는 키워드를 사용하여 어딘가에 자바스크립트 값이 존재한다는 사실을 선언할 수 있다
- 타입스크립트는 기본적으로 .ts와 .js 파일만 이해하며 그 외의 다른 파일 형식인 인식하지 못한다
- 타입스크립트의 declare 키워드를 사용하면 타입 스크립트 컴파일러에 미리 정보를 제공함으로써 에러를 수정할 수 있게 된다
- declare 키워드는 이미 존재하지만 타입스크립트가 알지 못하는 부분을 컴파일러에게 알려주는 역할을 한다
12.1.2 앰비언트 타입 선언 시 주의점
- tsconfig.json의 declaration을 true로 설정하면 타입스크립트 컴파일러가 .d.ts 파일을 자동으로 생성하기 때문에 수동으로 .d.ts 파일을 작성할 필요가 없다. 따라서 타입스크립트로 라이브러리를 개발할 때는 앰비언트 타입 선언을 사용할 필요가 없다
- 서로 다른 라이브러리에서 동일한 이름의 앰비언트 타입 선언을 한다면 충돌이 발생하여 어떤 타입 선언이 적용될지 알기 어려우며 의도한 대로 동작하지 않을 수 있다.
12.1.3 앰비언트 타입 선을 잘못 사용했을 때의 문제점
- 앰비언트 타입은 명시적인 임포트나 익스포트없이 코드 전역에서 사용할 수 있다
- 앰비언트 변수 선언은 어느 곳에서나 영향을 줄 수 있기 때문에 일반 타입 선언과 섞이게 되면 앰비언트 선언이 아닌 어떤 파일에 포함되어 있는지 파악하기 어려워진다
12.1.4 앰비언트 타입 활용하기
- 타입을 정의하여 임포트 없이 전역으로 공유
- .d.ts 파일에서의 앰비언트 타입 선언은 전역 변수와 같은 역할을 한다
- 따라서 앰비언트 타입을 선언하면 모든 코드 내에서 임포트하지 않고 사용할 수 있다
- declare global 활용하기
- declare global 키워드는 전역 변수를 선언할 때 사용한다. 예를 들어 전역 변수인 Window 객체의 스코프에서 사용되는 모듈이나 변수를 추가할 수 있다
12.2 스크립트와 설정 파일 활용하기
12.2.1 스크립트 활용하기
- 일반적으로 에디터가 타입스크립트 에러가 발생하면 즉시 알려주지만 컴퓨터 성능이 떨어지거나 대규모 프로젝트 중이라면 에러를 알려주는 속도가 느려진다
- 이럴 때는 아래 스크립트를 사용하여 실시간으로 에러를 확인할 수 있다
yarn tsc -noEmit --incremental -w
- 이 스크립튼는 프로젝트의 tsc(타입스크립트 컴파일러)를 실행한다
- noEmit 옵션은 자바스크립트로 된 출력파일을 생성하지 않도록 설정한 것이다
- incremental 옵션은 증분 컴파일을 활성화하여 컴파일 시간을 단축할 수 있게 해준다
- w는 파일 변경 사항을 모니터링한다는 의미이다
- 타입 커버리지 확인하기 : 프로젝트의 모든 부분이 타입스크립트 통제하에 돌아가고 있는지를 정량적으로 판단하기 위해 다음과 같은 스크립트를 사용할 수 있다
npx type-coverage --detail
- 이 스크립트를 사용하면 현재 프로젝트의 타입 커버리지와 any를 사용하고 있는 변수의 위치가 나타난다
12.2.2 설정 파일 활용하기
- tsconfig의 incremental 속성을 활용하여 타입스크립트의 컴파일 속도를 높일 수 있다
- incremental 속성을 true로 설정하면 증분 컴파일이 활성화되어 매번 모든 대상을 컴파일 하는 것이 아니라 변경된 부분만 컴파일하게 된다
- 이로써 모든 대상을 컴파일하지 않아도 되므로 컴파일 타임을 줄일 수 있다
- tsconfig 파일에 설정 추가
{
"compilerOptions":{
incremental: true
}
}
- 스크립트 활용
yarn tsc -noEmit -incremental -diagnostic
12.2.3 에디터 활용하기
- 에디터에서 때로 타입이 있는 객체인데 임포트되지 않거나 자동 완성 기능이 동작하지 않는다
- 이런 상황에서는 타입스크립트 서버를 재실행하면 된다.
- VScode-윈도우 : Ctrl+Shift+P
12.3 타입스크립트 마이그레이션
- 타입스크립트 마이그레이션을 진행하기로 했다면 다음과 같은 단계를 거치게 된다
- 타입스크립트 개발 환경을 설정하고, 빌드 파이프라인에 타입스크립트 컴파일러를 통합한다. tsconfig.json 파일에서 allowJS를 true로 noImplicitAny를 false로 설정해야 한다. allowJS (기본값:false )는 자바스크립트 파일을 컴파일할 때 사용하는 옵션으로, 기존 자바스크립트 함수를 타입스크 립트에서 임포트하거나 반대로 타입스크립트 함수를 자바스크립트에서 임포트할 수 있게 해준다. 또한 noImplicitAny는 암시적 any 타입이 있을 때 오류가 발생하게 하는 옵션이다. 따라서 타입을 점진적으로 추가하는 과정에서는 오류가 발생하지 않도록 noImplicitAny를 false로 설정해야 한다.
- 작성된 자바스크립트 파일을 타입스크립트 파일로 변환한다. 이 단계에서는 필요한 타입과 인터페이스를 하나씩 정의하며 함수 시그니처를 추가해나간다.
- 기존 자바스크립트 파일을 모두 타입스크립트로 변환하는 작업이 완료되었다면 tsconfig.json 파일에서 allowJS를 false로 변경하고, noImplicitAny를 true로 설정하여 타입이 명시되지 않은 부분이 없는지 점검한다.
12.4 모노레포
- 모노레포란 버전 관리 시스템에서 여러 프로젝트를 하나의 레포지토리로 통합하여 관리하는 소프트웨어 개발 전략이다
- 모노레포의 장점
- Lint, CI/CD 등 개발 환경 설정도 통합적으로 관리하기 때문에 불필요한 코드 중복을 줄여준다
- 개별적으로 프로젝트를 형성하는 폴리레포와 달리 공통 모듈도 동일한 프로젝트 내에서 관리되므로 별도의 패키지 관리자를 통해 모듈을 게시하지 않아도 된다
- 모노레포의 단점
- 시간이 지나면 레포지토리가 거대해질 수 있다
- 하나의 레포지토리에 여러 팀의 이해관계가 얽혀있다면 소유권가 권한 관리가 복잡해질 수 있다