tsconfig types란?

문제

googlemap을 사용하려던 도중 구글이 정의한 타입들이 추론되지 않는 이슈가 있었습니다.

분명히 googlemap이 제공하는 타입을 npm에서 잘 설치했는데, 추론이 안되니 뭔가 이상했습니다.

때문에 제가 알고 있었던 Triple-slash directives를 통해 해결하려했습니다.

 

triple-shash directives는 뭘까요?

<reference path="..." />와 같은 형태로 사용하는것이 일반적입니다. 파일간의 종속성을 선언하는 역할을 합니다. 컴파일러가 컴파일 과정에 추가 파일을 포함하도록 지시합니다. <reference type=”…” /> 의 경우 패키지간의 의존성을 나타냅니다. 예를 들어 type declaration 파일에 <reference types="node" />를 포함하면 해당 파일은 @types/node/index.d.ts에서 선언된 이름을 사용하므로 컴파일에 포함됩니다.

 

 

이를 통해서 global.d.ts를 만든 후 아래와 같이 추가해주었습니다.

/// <reference types="google.maps" />

 

그런데…

그런데 아직 뭔가 찜찜합니다. 왜냐하면 여지껏 개발을 하면서 이런 부가적인 설정없이 타입파일들을 잘 사용해왔기 때문이죠.

그래서 tsconfig.json을 하나씩 살펴보기 시작했습니다.

이때 처음보는 types라는 필드가 눈에 띄었습니다. 처음 보는 프로퍼티였기 때문에 한번 검색해보았습니다.

공식문서를 한번 살펴보겠습니다.

 

기본적으로 모든 “@types” 패키지들은 컴파일에 포함됩니다.  ./node_modules/@types/, ../node_modules/@types/, ../../node_modules/@types/, 를 포함한 모든 node_modules/@types폴더들이 포함된다는 의미입니다. 만약에 types 가 정의되어있다면, 정의되어있는 패키지들만 전역 스코프에 추가됩니다.

 

types필드가 범인인것 같습니다.

프로젝트에서는 turporepo를 사용하고 있었는데요, app에서 root의 tsconfig를 상속받아 사용하고 있었습니다.

때문에 app의 tsconfig에서 types프로퍼티의 값으로 google.maps를 추가해줌으로써 해결을 했습니다.

 

AS-IS

// tsconfig.json
{
  "extends": rootconfig
  "compilerOptions": {
    ... 
  },
}

TO-BE

//tsconfig.json
{
  "compilerOptions": {
    ... 
    "types": ["vitest/globals, google.maps"]
  },
}

 

실습

이렇게 글로만 보면 이해가 잘 안될 수도 있으니 한번 실습을 해보겠습니다

1. npm create vite@latest 를 통해 react app을 하나 만들어 줍니다.
2. npm i @types/google.maps 를 통해 타입을 설치해줍니다.

app.tsx에서 window.google을 입력해보면 추론이 잘 되는것을 알 수 있습니다. 다만 타입만을 설치했으니 실제로 빌드해보면 에러는 나겠죠. 저희는 types필드만 확인하면 되니 type패키지만 설치하겠스니다.

그다음 tsconfig에서 types프로퍼티의 값으로 빈 배열을 추가해보겠습니다

//tsconfig.json
{
  "compilerOptions": {
    ... 
    "types": []
  },
}

앞서 입력한 window.google을 살펴볼까요? 컴파일 시점에 오류가 나는것을 확인할 수 있습니다.

그렇다면 types필드에 window.google을 추가하겠습니다.

이제 잘 되는것을 볼 수 있습니다.

//tsconfig.json
{
  "compilerOptions": {
    ... 
    "types": ["google.maps"]
  },
}

이처럼 polyrepo환경에서는 types필드를 신경쓰지않아도 큰 문제가 되지는 않습니다.

그럼 왜 사용할까?

컴파일 시간을 줄일 수 있을것 같습니다.

프로젝트에서 사용하는 특정 유형만 포함하면 컴파일러가 처리할 정보가 적을수록 컴파일 과정이 빨라지기 때문입니다.