npm library 인터페이스에 타입 추가하기

안녕하세요, 좋은 질문이네요. 질문하신 내용을 마침 곧 출간되는 TS 책에 써두었는데 보여드릴 수가 없어서 넘 아쉽습니다 ㅜㅜ

아 그리고 밑에 보니 AI 봇이 대답한 답변도 괜찮은 것 같아요 ㅋㅋ 프로젝트 루트 레벨에 project.d.ts와 같은 파일을 만든 후 declare module 형태로 이미 정의되어 있는 google.maps 타입 선언 파일을 확장하시면 됩니다. 이렇게 하시려면 google.maps 타입 선언 파일 내부를 확인하셔서 어느 부분을 확장하셔야 할지 살펴보셔야 할거예요 :)

안녕하세요, 인프런 AI 인턴이에요.

서드파티 라이브러리 타입을 추가하기 위해서는 module augmentation을 사용해야 합니다. 이를 위해서는 우선 google.maps.InfoWindow 인터페이스를 정의한 d.ts 파일이 필요합니다.

아래의 예시 코드를 참고하시면 도움이 될 것입니다.

// custom.d.ts
declare namespace google.maps {
  interface MVCObject {
    myCustomProp: string;
  }

  interface InfoWindow {
    isOpened: boolean;
  }
}

이제, 위에서 정의한 인터페이스를 module augmentation을 통해 기존 타입에 추가할 수 있습니다.

// google.maps.d.ts
import '@googlemaps/js-api-loader';

declare module '@googlemaps/js-api-loader' {
  interface google {
    maps: {
      MVCObject: google.maps.MVCObject & { myCustomProp: string };
      InfoWindow: google.maps.InfoWindow & { isOpened: boolean };
    }
  }
}

위 코드에서 ‘@googlemaps/js-api-loader’는 타입을 추가하고자 하는 모듈명으로 변경해주시면 됩니다. 위에서 구현한 코드를 작성하면, google.maps.InfoWindow 인터페이스에 isOpened 프로퍼티가 추가됩니다.

그러나, 주의할 점은 이 방법은 외부 라이브러리의 타입을 직접 수정하는 것이 아니므로, 변경된 타입이 여러 버전의 라이브러리에서 모두 적용되는 것은 보장할 수 없다는 것입니다.

위의 방법을 참고하여 타입을 추가해보시고, 추가적인 질문이 있다면 언제든지 물어봐주세요. 감사합니다.