TypeScript e Google Maps

TypeScript è un superset tipizzato di JavaScript che viene compilato in JavaScript semplice. Lo snippet seguente mostra un semplice utilizzo di Google Maps utilizzando 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
  });
}

Per iniziare

Il progetto DefinitelyTyped è un progetto open source che gestisce i file di dichiarazione dei tipi per molti pacchetti, tra cui Google Maps. I file di dichiarazione JavaScript di Google Maps (vedi file di origine su GitHub) possono essere installati utilizzando NPM dal pacchetto @types/google.maps.

npm i -D @types/google.maps

Funzionalità alpha e beta

I tipi in genere non hanno le proprietà, le funzioni o le classi presenti nelle versioni alpha o beta. In molti di questi casi, l'oggetto può essere convertito nel tipo corretto.

Il seguente errore è causato dalla proprietà beta mapId per 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'.

L'errore riportato sopra può essere corretto con il cast riportato di seguito.

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

Pacchetti @types in conflitto

Alcune librerie potrebbero utilizzare un pacchetto diverso da @types/google.maps, il che potrebbe causare conflitti. Utilizza l'opzione del compilatore skipLibCheck per evitare problemi con tipi incoerenti.

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

Specifica typeRoots

Alcuni framework come Angular potrebbero richiedere di specificare l'opzione del compilatore typeRoots per includere i tipi installati da @types/google.maps e tutti gli altri pacchetti "@types".

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