TypeScript und Google Maps

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

TypeScript ist eine typisierte Obermenge von JavaScript, die zu einfachem JavaScript kompiliert wird. Das folgende Snippet veranschaulicht die einfache Verwendung von Google Maps mithilfe von TypeScript.

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
  });
}

Erste Schritte

Das DeklarlyTyped-Projekt ist ein Open-Source-Projekt, in dem Typdateien für viele Pakete, einschließlich Google Maps, verwaltet werden. Die Google Maps JavaScript-Deklarationsdateien (siehe Quelldateien auf GitHub) können mithilfe der NPM aus dem Paket @types/google.maps installiert werden.

npm i -D @types/google.maps

Alpha- und Betafunktionen

Die Typen haben in der Regel keine Properties, Funktionen oder Klassen in Alpha- oder Betareleases. In vielen dieser Fälle kann das Objekt in den richtigen Typ umgewandelt werden.

Der folgende Fehler wird durch die Beta-Property mapId für MapOptions verursacht.

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'.

Der obige Fehler kann mit dem nachfolgenden Cast-Fehler behoben werden.

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

In Konflikt stehende @types-Pakete

Einige Bibliotheken verwenden möglicherweise ein anderes Paket als @types/google.maps, was zu Konflikten führen kann. Verwenden Sie die Compiler-Option skipLibCheck, um Probleme mit inkonsistenten Typen zu vermeiden.

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

typeRoots angeben

Für einige Frameworks wie Angular muss möglicherweise die Compiler-Option typeRoots angegeben werden, um Typen einzuschließen, die aus @types/google.maps und allen anderen Paketen von „@types"“ installiert wurden.

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