Part12_TypeScript_ProjectManagement
이효경
책 읽기

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 타입스크립트 마이그레이션

  • 타입스크립트 마이그레이션을 진행하기로 했다면 다음과 같은 단계를 거치게 된다
  1. 타입스크립트 개발 환경을 설정하고, 빌드 파이프라인에 타입스크립트 컴파일러를 통합한다. tsconfig.json 파일에서 allowJS를 true로 noImplicitAny를 false로 설정해야 한다. allowJS (기본값:false )는 자바스크립트 파일을 컴파일할 때 사용하는 옵션으로, 기존 자바스크립트 함수를 타입스크 립트에서 임포트하거나 반대로 타입스크립트 함수를 자바스크립트에서 임포트할 수 있게 해준다. 또한 noImplicitAny는 암시적 any 타입이 있을 때 오류가 발생하게 하는 옵션이다. 따라서 타입을 점진적으로 추가하는 과정에서는 오류가 발생하지 않도록 noImplicitAny를 false로 설정해야 한다.
  2. 작성된 자바스크립트 파일을 타입스크립트 파일로 변환한다. 이 단계에서는 필요한 타입과 인터페이스를 하나씩 정의하며 함수 시그니처를 추가해나간다.
  3. 기존 자바스크립트 파일을 모두 타입스크립트로 변환하는 작업이 완료되었다면 tsconfig.json 파일에서 allowJS를 false로 변경하고, noImplicitAny를 true로 설정하여 타입이 명시되지 않은 부분이 없는지 점검한다.

12.4 모노레포

  • 모노레포란 버전 관리 시스템에서 여러 프로젝트를 하나의 레포지토리로 통합하여 관리하는 소프트웨어 개발 전략이다
  • 모노레포의 장점
    • Lint, CI/CD 등 개발 환경 설정도 통합적으로 관리하기 때문에 불필요한 코드 중복을 줄여준다
    • 개별적으로 프로젝트를 형성하는 폴리레포와 달리 공통 모듈도 동일한 프로젝트 내에서 관리되므로 별도의 패키지 관리자를 통해 모듈을 게시하지 않아도 된다
  • 모노레포의 단점
    • 시간이 지나면 레포지토리가 거대해질 수 있다
    • 하나의 레포지토리에 여러 팀의 이해관계가 얽혀있다면 소유권가 권한 관리가 복잡해질 수 있다