TypeScript 및 Google 지도

TypeScript는 유형이 있는 JavaScript 상위 집합으로, 일반 JavaScript로 컴파일됩니다. 아래 스니펫은 TypeScript를 사용한 Google 지도의 간단한 사용 예를 보여줍니다.

let map: google.maps.Map;
const center: google.maps.LatLngLiteral = {lat: 30, lng: -110};

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    center,
    zoom: 8
  });
}

시작하기

DefinitelyTyped 프로젝트는 Google 지도를 비롯한 많은 패키지의 유형 선언 파일을 유지 관리하는 오픈소스 프로젝트입니다. Google 지도 JavaScript 선언 파일(GitHub의 소스 파일 참고)은 @types/google.maps 패키지의 NPM을 사용하여 설치할 수 있습니다.

npm i -D @types/google.maps

알파 및 베타 기능

이러한 유형에는 일반적으로 알파 또는 베타 버전의 속성, 함수 또는 클래스가 없습니다. 이러한 경우 대부분 객체를 적절한 유형으로 캐스팅할 수 있습니다.

다음 오류는 MapOptions의 mapId 베타 속성으로 인해 발생합니다.

error TS2345: Argument of type '{ center: google.maps.LatLng; zoom: number;
mapId: string; }' is not assignable to parameter of type 'MapOptions'. Object
literal may only specify known properties, and 'mapId' does not exist in type
'MapOptions'.

위의 오류는 아래 캐스팅으로 수정할 수 있습니다.

{ center: {lat: 30, lng: -110}, zoom: 8, mapId: '1234' } as google.maps.MapOptions

@types 패키지 충돌

일부 라이브러리에서 @types/google.maps 이외의 패키지를 사용할 수 있으며 이로 인해 충돌이 발생할 수 있습니다. 일관되지 않은 유형 문제를 방지하려면 skipLibCheck 컴파일러 옵션을 사용합니다.

{
  "compilerOptions": {
    "skipLibCheck": true
  }
}

typeRoots 지정

Angular와 같은 일부 프레임워크에서는 @types/google.maps 및 기타 모든 '@types' 패키지에서 설치된 유형을 포함하도록 typeRoots 컴파일러 옵션을 지정해야 할 수 있습니다.

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