TypeScript è un soprainsieme digitato di JavaScript che si compila in JavaScript normale. Lo snippet seguente mostra un semplice utilizzo di 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
});
}
Per iniziare
Il progetto DefinitelyTyped è un progetto open source che gestisce i file di dichiarazione di tipo per molti pacchetti, tra cui Google Maps. I file di dichiarazione JavaScript di Google Maps (consulta i file di origine su GitHub) possono essere installati utilizzando Gestione dei partner di rete 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 trasmesso al tipo corretto.
Il seguente errore è causato dalla proprietà mapId beta 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 la trasmissione 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, che potrebbe causare conflitti. Utilizza l'opzione di compilazione skipLibCheck per evitare problemi con tipi incoerenti.
{
"compilerOptions": {
"skipLibCheck": true
}
}
Specificare typeRoots
Alcuni framework come Angular potrebbero richiedere la specifica dell'opzione di compilazione typeRoots per includere i tipi installati da @types/google.maps e tutti gli altri pacchetti "@types".
{
...
"compilerOptions": {
...
"typeRoots": [
"node_modules/@types",
],
...
}
}