TypeScript y Google Maps

TypeScript es un superconjunto escrito 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
  });
}

Cómo comenzar

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

npm i -D @types/google.maps

Funciones alfa y beta

Por lo general, los tipos no tienen las propiedades, las funciones ni las 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
  }
}

Cómo especificar typeRoots

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

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