[ 카카오맵 API ] kakaomap type 정의

 

kakaomap API는 타입 지원을 하지 않기 때문에 타입스크립트 환경에서 해당 라이브러리를 사용하려면 글로벌 타입 선언이 필요하다.

 

 

env.d.ts

interface Window {
  kakao: any
}

 

여기까지 했을 때 new window.kakao.maps로 시작하는 메서드는 문제 없이 사용할 수 있지만, kakao Map 객체에 대한 타입 정의는 불가능하다.

 

그래서 필요한 타입 선언을 직접 추가해주는 방법을 사용했다.

 

 

src/types/kakao.d.ts

declare namespace kakao.maps {
  class Map {
    constructor(container: HTMLElement, options: MapOptions)
    getCenter(): LatLng
    setCenter(latlng: LatLng): void
    // 필요한 메서드 추가
  }

  interface MapOptions {
    center: LatLng
    level: number
  }

  class LatLng {
    constructor(latitude: number, longitude: number)
  }
}

• 필요한 메서드나 객체 등을 수동으로 추가해줘야 한다는 단점

 

tsconfig.json

"compilerOptions": {
  "typeRoots": ["node_modules/@types", "src/types"]
}

• 경로 추가

 

이렇게 타입을 직접 선언하면 map 객체에 타입 정의를 할 수 있다.

const mapInstance = ref<null | kakao.maps.Map>(null)

 

mapInstance.value.getCenter()

map 객체에 쓸 수 있는 getCenter()와 같은 메서드도 타입 경고 없이 사용 가능하다. (물론 수동으로 추가해줘야 하지만…)