Angular5에서 네이버 지도 구현 및 typescript에서 외부라이브러리 import 방법

안녕하세요.

오늘은 Angular5(typescript 기반)에서 외부라이브러리 import 하는 방법에 대해서 알아보겠습니다.

정확히는 Typescript에서 tsd 파일 없이 외부라이브러리를 사용하는 방법에 대해서 알아보도록 하겠습니다.

Typescript에서 외부라이브러리 import 방법으로 daum 지도를 api사용해 보도록 하겠습니다.

목적

• Angular5에서 daum 지도 사용 방법을 알아봅니다.

요구사항

• tsd 파일 없이 외부라이브러리를 import하여 사용합니다.

샘플코드

• 아래와 같이 sample 코드를 작성합니다.
  
  

에러 발생

• 컴파일 단계에서 daum 객체에 에러가 발생합니다. 에러 내용은 "cannot find daum"
• daum 변수에 대한 타입이 지정되어 있지 않아 발생하는 에러로 해결방법은 두가지가 있습니다.
• 첫번째, tsd파일을 만들어줍니다.
• 두번째, daum 변수를 any타입으로 선언합니다.
• 우리는 두번째 방법을 통해서 간단히 해결해보도록 하겠습니다.
  
  

실행 결과

• declar var daum: any; 한줄을 추가하니 vscode ide상에서 에러(빨간줄)가 사라진것을 확인할 수 있습니다.
  
  

참조

• https://www.thepolyglotdeveloper.com/2017/03/javascript-libraries-in-a-typescript-application-revisited/
• https://www.thepolyglotdeveloper.com/2016/01/include-external-javascript-libraries-in-an-angular-2-typescript-project/
• https://www.thepolyglotdeveloper.com/2016/05/add-type-definitions-external-javascript-library-typescript/
• https://studystorage.blogspot.kr/2017/02/typescript-angular2-5-angular.html
• https://tonyne.jeju.onl/2017/03/05/using-external-js-lib-without-tsd-in-typescript/

모두 즐거운 코딩 하세요~