TypeScript i Mapy Google

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

TypeScript to nadrzędny zestaw kodu JavaScript, który kompiluje się zwykłym kodem JavaScript. Fragment kodu poniżej pokazuje, jak można łatwo korzystać z Map Google przy użyciu 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
  });
}

Pierwsze kroki

Projekt DefinitelyType to projekty open source służące do obsługi plików deklaracji typu wielu pakietów, w tym Map Google. Pliki deklaracji JavaScriptu Map Google (zobacz pliki źródłowe w GitHubie) można zainstalować za pomocą NPM z pakietu @types/google.maps.

npm i -D @types/google.maps

Funkcje alfa i beta

Typy zwykle nie mają właściwości, funkcji ani klas znalezionych w wersjach alfa i beta. W wielu przypadkach obiekt może zostać przesłany na prawidłowy typ.

Ten błąd wynika z właściwości mapId beta w MapOptions.

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

Powyższy błąd można poprawić, korzystając z castu poniżej.

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

Konflikt pakietów @types

Niektóre biblioteki mogą używać pakietu innego niż @types/google.maps, co może powodować konflikty. Aby uniknąć problemów z niespójnymi typami, użyj opcji kompilatora skipLibCheck.

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

Określanie typu rootroot

Niektóre platformy, takie jak Angular, mogą wymagać określenia opcji kompilatora typeRoots, aby uwzględnić typy zainstalowane z pakietów @types/google.maps i wszystkich innych pakietów "@types".

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