TypeScript und Google Maps

TypeScript ist eine typisierte Obermenge von JavaScript, die in einfachen JavaScript-Code 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 Betafeatures

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

Der folgende Fehler wird durch die Eigenschaft (Beta) 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 Fehler oben kann mit der folgenden Umwandlung korrigiert 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. Das kann zu Konflikten führen. 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 „@types“-Paketen installiert wurden.

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