[TypeScript] 카카오 맵 React에서 kakao SDK 사용하기

파이널 프로젝트 TypeScript로 리팩토링을 하다가 카카오맵에 관련된 자료형을 어떻게 해야할지 고민이 되어서 방법을 적어두려고 한다.

any 타입으로 하는방법

window as any를 통해 window객체를 any타입으로 정의한 뒤 kakao 객체를 사용하는 방법

// 방법 1
const {kakao} = window as any;

// 방법 2
const kakao = (window as any).kakao;

function KakaoMapScript (post_location : any){
  let mapContainer = document.getElementById('map'), // 지도를 표시할 div
      mapOption = {
        center : new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
        level : 3 // 지도의 확대 레벨
      }

  let map = new kakao.maps.Map(mapContainer, mapOption);

interface로 하는 방법

window 인터페이스를 확장하는 방법으로 사용한다.

declare global {
    interface Window{
        daum : any
    }
}

function get_address() {
  new window.daum.Postcode({
    oncomplete: function (data:any) {
      // const zcode = data.zonecode; // 우편번호
      // const roadAddr = data.roadAddress; // 도로명 주소
      const jibunAddr = data.jibunAddress; // 지번주소
      setAddress(jibunAddr)
    }
  }).open();

declare 키워드

declare 키워드는 컴파일러에게 해당 변수나 함수가 이미 존재한다는 것을 알리는 역할을 한다. 다른 영역의 코드에서 declare로 선언된 해당 변수나 함수를 참조할 수 있으며 declare로 선언된 부분은 javaScript로 컴파일 되지 않는다.

• declare global : 모듈 파일에서도 전역참조가 가능한 선언 코드를 작성하고 싶을 때 사용한다. 전역 참조가 가능하다는 것은 해당 선언의 참조를 위해 별도의 불러오기 코드가 필요 없다는 뜻이다. 참고로 이 블록은 오로지 declare module블록 안에서만 중첩이 가능하다.

예시

declare const kakaoSDK = {
	doSomething : () => boolean
}

컴파일러가 인식하지 못하는 JavaScript 파일을 웹사이트에 추가했다고 하자. 아마 다른 도메인에서 온 스크립트 파일일 수도 있다. 해당 스크립트 파일은 실행되면서 api메소드를 생성하고 이를 글로벌 스코프에 있는 kakapSDK 식별자에 할당한다.

만약 TypeScript 코드에서 kakaoSDK.doSomthing()을 호출한다면 컴판일러는 해당 변수가 존재하는지 알지 못하기에 컴파일 에러를 발생시킬 것이다.

이때, declare 키워드를 이용하면 해당 변수의 존재와 타입을 알릴 수 있다. 컴팡일러는 해당 선언문을 다른 코드의 정적 타입을 위해 사용할 뿐 JavaScript로 컴파일하지 않는다.

[TypeScript] declare
stackoverflow