TypeScript y Google Maps

TypeScript es un superconjunto tipado de JavaScript que se compila en JavaScript simple. En el fragmento que aparece a continuación, se demuestra el uso simple de Google Maps con 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
  });
}

Introducción

El proyecto DefinitelyTyped es un proyecto de código abierto en el que se encuentran los archivos de declaración de tipo de muchos paquetes, incluido Google Maps. Los archivos de declaración de JavaScript de Google Maps (consulta los archivos fuente en GitHub) se pueden instalar usando NPM desde el paquete @types/google.maps.

npm i -D @types/google.maps

Funciones alfa y beta

Por lo general, los tipos no tienen las propiedades, funciones o clases que se encuentran en las versiones alfa o beta. En muchos de estos casos, el objeto se puede convertir al tipo correcto.

La propiedad beta mapId de MapOptions causa el siguiente error.

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

El error anterior se puede corregir con la siguiente conversión.

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

Paquetes @types en conflicto

Algunas bibliotecas pueden usar un paquete que no sea @types/google.maps, lo que puede causar conflictos. Usa la opción del compilador skipLibCheck para evitar problemas de tipos inconsistentes.

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

Especifica typeRoots

Algunos frameworks, como Angular, pueden requerir que se especifique la opción del compilador typeRoots para incluir tipos instalados desde @types/google.maps y todos los demás paquetes "@types".

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