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

Informationen für Einsteiger

DefinitelyTyped ist ein Open-Source-Projekt, in dem Typdeklarationsdateien für viele Pakete gepflegt werden, darunter auch für Google Maps. Die Google Maps-JavaScript-Deklarationsdateien (siehe Quelldateien auf GitHub) können über NPM aus dem Paket @types/google.maps installiert werden.

npm i -D @types/google.maps

Alpha- und Betafeatures

Die Typen haben in der Regel nicht die Eigenschaften, Funktionen oder Klassen, die in Alpha- oder Betaversionen verfügbar sind. 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 abweichenden 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",
        ],
        ...
    }
}