Typescript 관련

지도/로컬 API
#1

안녕하세요. 현재 angular4 / typescript 를 사용하여 웹을 개발중에 있는데 typescript 에서 지도 API 사용은 어떻게 해야하나요??

#2

제가 typescript를 안써봐서 잘 모르겠습니다.

지도 API는 daum.maps 라는 네임스페이스 안에 객체들이 선언되어 있으니
이를 활용하여 이 네임스페이스의 타입을 임의(any) 로 정하신 후에 사용하시면 되지 않을까요?

흐음… typescript + 3rd party library 같이 사용하는 해결책을 구글링해서 찾아보시면 될 듯 합니다.

#3

3rd-party library없이는 사용할 수 없나요?
루트 html에 kakao map을 등록(+appkey)하고, ts에서 아래와 같이 사용할 경우 “daum cannot find name” 에러가 발생합니다.

var options = { //지도를 생성할 때 필요한 기본 옵션
center: new daum.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
level: 3 //지도의 레벨(확대, 축소 정도)
};

#4

지도API를 사용하는 스크립트 내부에

declare var daum: any;

1.이렇게 미리 선언하고
2.지도를 불러온 다음에
3.지도 API 구현 코드

순서로 안되는건가요?

스택오버플로에 비슷한 질문이 있는데 참고해보시죠.
https://stackoverflow.com/questions/13252225/call-a-global-variable-inside-typescript-module

#5

정석적인 방법이라 할 순 없지만, 제가 angular4를 이용해서 개발할때 daum 지도 관련 SDK를 이용하기 위해서 아래와 같은 방식을 이용했었습니다.

let daum = window['daum'];
var options = {
    center: new daum.maps.LatLng(33.450701, 126.570667),
    level: 3
};

ps. TypeScript를 지원하지 않는 js 라이브러리를 이용할때 직접 type definition file(*.d.ts) 파일을 만들기 어려운 경우, 꼼수로 정적 타입 지원을 일부 포기하고 window 전역 객체를 이용해서 사용할 수 있습니다.

2개의 좋아요
#6

빠른 답변 감사합니다.
말씀해주신 방법처럼 declare로 선언후에 사용하면 정상동작하네요.
아래 링크에 browser 그리고 ionic에서 자바스크립트 외부라이브러리를 임포트해서 사용하는 방법에 대해서
자세히 다루고 있네요.
https://www.thepolyglotdeveloper.com/2017/03/javascript-libraries-in-a-typescript-application-revisited/

1개의 좋아요
#7

전역객체를 사용하는 것을 임시방편으로 이용할 수 있겠네요.
답변 감사합니다.^^

1개의 좋아요
#8

말씀해주신 방법 덕분에 해결되었습니다. 감사합니다. :grin:

#9 
declare global {
    interface Window {
        kakao: any;
    }
    const kakao: any;
}

이렇게 사용하시면 전역적으로 쓸 수 있습니다.