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
});
}
Primeros pasos
El proyecto DefinitelyTyped es un proyecto de código abierto en el que se encuentran 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 mediante NPM desde el paquete @types/google.maps.
npm i -D @types/google.maps
Funciones en versiones 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
Es posible que algunas bibliotecas usen 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
}
}
Especificación de 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",
],
...
}
}