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 mediante la Administración de socios de red 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 o 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 incoherentes.
{
"compilerOptions": {
"skipLibCheck": true
}
}
Cómo especificar 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 otros paquetes "@types".
{
...
"compilerOptions": {
...
"typeRoots": [
"node_modules/@types",
],
...
}
}