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

타입스크립트 입문 - 기초부터 실전까지

자바스크립트 프로토타입의 활용 사례

작성

382

구글맵 로딩을 위해

@googlemaps/js-api-loader

로딩된 구글맵 타입을 위해

@types/google.maps

를 사용중인데요.

제가 구글맵의 MVCObject와 InfoWindow라는 Interface에 저만의 프로퍼티나 메서드를 추가하고싶은데 이에따른 타입스크립트를 어떻게 작성해야할지 몰라서 질문드려요.

google.maps.InfoWindow에 isOpened 같은 메서드를 추가하여, 생성된 모든 infoWindow 인스턴스들이 isOpened를 갖게 해주고 싶었어요.

그래서 일단 @ts-ignore를 사용해서 google.maps.InfoWindow.prototype.isOpened 로 추가하고, 사용하니까 되긴 하더라고요. 근데 이에 대해 타입스크립트를 어떻게 작성해야할지 조사를 해봐도 잘 모르겠어요.

서드파티 라이브러리 타입 추가를 위해 d.ts 파일 만들어서 module augmentation이라는걸 하면 된다고 하는데, 예시도 많지 않고, 선임도 없고, 이것저것 해봤는데 실패만 해서, 질문 드려요. 부탁드립니다...

javascript typescript es6

답변 2

장기효(캡틴판교)

지식공유자

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

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

인프런 AI 인턴

안녕하세요, 인프런 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 프로퍼티가 추가됩니다.

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

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

인프런 커뮤니티 질문&답변

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