우아한 타입스크립트 with React -12장 프로젝트 관리

이번 장에서는 실제 프로젝트 단위에서 사용할 내용들을 언급해준다.

앰비언트 타입 활용하기

앰비언트 타입 선언

타입스크립트의 타입을 .d.ts 확장자를 가진 파일에도 선언할 수 있는데, 이 경우 타입 선언만 할 수 있으며 값을 표현할 수는 없다.

값을 포함하는 일반적인 선언과  구별하기 위해 .d.ts 확장자를 가진 파일에서 하는 타입 선언을  앰비언트 타입 선언이라고 부른다. 또한 앰비언트 타입 선언으로 값을 정의할 수느 없지만 declare라는 키워드를 사용하여 어딘가에 자바스크립트 값이 존재한다는 사실을 알릴 수 있다.

 

대표적인 앰비언트 타입 사용 사례

declare module "*.png" {
	const src:string;
    export default src;
}

 

자바스크립트 라이브러리 사용할 때

 

앰비언트 타입 선언을 하면 자바스크립트 라이브러리 내부 함수와 변수의 타입을 선언하여 타입스크립트가 자동으로 .d.ts확장자를 가진 파일을 검색하여 타입 검사를 진행하고 문제 없이 컴파일되도록 한다. 

또한 VSCode와 같은 코드 편집기도 .d.ts 확장자를 가진 파일을 해석하여 코드를 작성할 때 유용한 타입 힌트를 제공한다.

ex : @types/react를  npm install -D 명령을 토해 설치하면 node_modules/@types@react 에 index.d.ts 와 global.d.ts가 설치된다.

 

 

vscode와 같은 에디터는 이러한 앰비언트 타입 선언 파일을 활용하여 코드 작성 시 유용한 타입 힌트를 제공한다.

 

즉 앰비언트 타입 선언은 타입스크립트에게 '자바스크립트 코드 안에는 이러한 정보들이 있어'라고 알려주는 도구'라고 이해하면 된다.

타입스크립트로 작성된 라이브러리

타입스크립트로 작성된 라이브러리도 컴파일을 줄이기 위해서 보통 자바스크립트 파일과 .d.ts파일로 배포된다.

이때 tsconfig.json 파일의 declaration을 true로 설정하면  타입스크립트 컴파일러는 자동으로 .d.ts파일을 생성한다.

 

자바스크립트 어딘가에 전역 변수가 정의되어 있음을 타입스크립트에 알릴 때

타입스크립트로 직접 구현하지 않았지만 시렞 자바스크립트 어딘가에 전역 변수가 정의되어 있는 상황을 타입스크립트에 알릴때 엠비언트 타입선언을 사용한다.

 

declare global {
  interface Window {
    deviceId: string | undefined;
    appVersion: string;
  }
}

위 예시 말고도 카카오 지도 등을 사용해보았으면 declare global을 사용해 보셨을 것이다.

 

앰비언트 타입 선언시 주의점

1. 타입 스크립트로 만드는 라이브러리에는 불필요(자동 생성되므로)
2. 전역으로 타입 정의하여 사용할 때 서로 다른 라이브러리에서 동일한 이름의 앰비언트 타입 선언을 한다면 충돌이 발생함
3. 앰비언트 타입 선언을 .ts파일 내에 사용하면 앰비언트 타입의 의존성 관계가 보이지 않기 때문에 변경에 의한 영향 범위를 파악핳기 힘듬 ( 앰비언트 타입의 경우 명시적인 임포트나 익스포트 없이 코드 전역에서 사용 가능하기에 )

 

앰비언트 타입 활용하기

1. 타입을 정의하여 임포트 없이 전역으로 공유가능하다. ( 유틸리티 타입에 사용할 경우 유용)
   

   //src/index/d.ts
   
   type Optional<T extends object, K extends keyof T = keyof T> = Omit<T, K> &
     Partial<Pick<T, K>>;​

2. declare type 활용하기
   보편적으로 많이 사용하는 커스텀 유틸리티 타입을 declare type으로 선언하면 전역으로 사용 가능
   

   declare type Nullable<T> = T | null;​

3. declare module 활용하기
   

   declare module "*.png" {
   	const src:string;
       export default src;
   }​

   로컬 이미지나 svg 같이 외부로 노출되어 있지 않은 파일을 모듈로 인식하여 사용하게 할 수도 있고, CSS-in-JS 라이브러리의 폰트, 크기 ,색상등이 있는 theme의 인터페이스 타입을 확장하여 theme타입이 자동으로 완성되도록 할 수 있다.
4. declare namespace 활용하기
   .env 파일을 사용할 때 declare namespace를 활용하여 process.env로 설정값을 손쉽게 불러오고 환경변수의 자동완성기능을 쓸 수 있다.
   

   declare namespace NodeJS {
     interface ProcessEnv {
       readonly API_URL: string;
       readonly API_INTERNAL_URL: string;
     }
   }​

5.  declare global 활용하기
   전역 변수를 선언할 떄 사용할 수 있다.

 

declare와 번들러의 시너지

declare를 통해서 단지 컴파일러에 해당 변수가 존재함을 알리기만 하면,  코드가 실행될 경우 실제 데이터가 없어서 기대하는 동작과 다를 수 있다. 이때 번들 시점에서 번들러를 통해서 해당 데이터를 주입하면 해당 문제를 해결할 수 있다.

ex) 롤업 번들러의 inject 모듈

 

스크립트와 설정 파일 활용하기

타입스크립트 프로젝트에서 스크립트와 tsconfig등을 잘 활용하면 개발 생산성을 높일 수 있는데 이와 관련된 팁을 알려준다.

스크립트 활용하기

실시간으로 타입을 검사하기

yarn tsc -noEmit -incremental -w

 

noEmit : 자바스크립트로된 출력 파일을 생성하지 않도록 설정

incremental : 증분 컴파일을 활성하여 컴파일 시간을 단축

w : 파일 변경 사항을 모니터링한다

 

타입 커버리지 확인

npx type-coverage -detail

 

타입스크립트로 마이그레이션 중인 프로젝트나 레거시 코드가 많은 프로젝트를 다룰 때 리팩토링에 도움이 되는 정량적인 지표를 얻을 수 있다.

 

설정 파일 활용하기

 

타입스크립트 컴파일 속도 높이기

incremental 속성을 t rue로 하면 증분 컴파일이 활성화되어, 변경된 부분만 컴파일하게 된다.

//tsconfig

{
	"compolierOptions": {
    	incremental: true
        //...
    }
}

 

에디터 활용하기

에디터에서 타입스크립트 서버 재시작하는법  : 종종 임포트나 자동 완성이 제대로 안될 때 사용  가능

ctrl(command) + shift +[

TypeScript : Restart TS server

 

타입스크립트 마이그레이션

1. 타입스크립트 마이그레이션의 필요성

보통은 마이그레이션보다 서비스가 변경하는 것에 따라 새로운 설계를 하는게 효율적일 수 있으므로 이를 확인해야 한다.

 

2.점진적인 마이그레이션

프로젝트 규모가 클 경우 한번에  변경하는 것은 불가능하므로, allowJS를 true, noImplicityAny 를 false로 설정하고 할 수 있으며, 이때 무작정 연기하기 보다는 우선순위를 정해 진행해야 한다.

 

3. 마이그레이션 진행하기

1. 타입스크립트 개발 환경을 설정하고 빌드 파이프라인에 타입스크립트 컴파일러를 통합한다.
   이때 allowJS를 true, noImplicityAny를 우선 false로 설정해야 한다.
2. 작성된 자바스크립트 파일을 타입스크립트 파일로 변환하다. 이 단계에서는 필요한 타입과 인터페이스를 하나씩 정의하며 함수 시그니처를 추가해나간다.
3. 기존 자바스크립트 파일을 모두 변환이 완료되었다면, allowJS를 false로 변경하고, noImplicityAny를 true로 변경한 후 타입이 명시되지 않은 부분이 없는지 점검 한다.

 

 

..모노레포의 경우 타입스크립트 자체와는 연관성이 높지 않다 생각해서 생략했습니다.